The DOM: Style in the Header, Script in the Footer

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on September 21, 2015 2:51:14 AM ● Video Link: https://www.youtube.com/watch?v=i1rQi9Maem8

Duration: 1:53

14,046 views

125

The DOM: Style in the Header, Script in the Footer

Maybe you've been told that links to style sheets (CSS) should be included in the header and that links to script (JS) should be included in the footer. Ever asked yourself why?

If you've ever seen a webpage that loads the text first, then after a bit loads the formatting and style, you've seen a page that didn't have the links to style and script in the correct places.

This all has to do with how the browser decides it's loaded enough information to display. There's an event called 'DOMContentLoaded', and once that event happens, whatever is loaded will be displayed.

The DOM will tell the browser it's ready once the HTML is loaded, and sometimes the CSS and JS hasn't caught up. However, if you place the CSS in the header and the JS in the footer, you can ensure that all content will be loaded before the DOM triggers the 'DOMContentLoaded' event, the event that shows the user your content.

This is a simple explaination, as most of these videos are. For more information, I really liked this resource: http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/