4 ms·

"Generally it is wise to import javascript files at the end of the body to reduce page load time." Does this really make a difference? Even if it did, wouldn't

"Generally it is wise to import javascript files at the end of the body to reduce page load time." Does this really make a difference? Even if it did, wouldn't it lead to seeing a jump in the content after the CSS loads?

sergiotapia 12y ago
Yep. If you link a javascript file your browser needs to parse that URL, open the connection, download the asset, etc. all before drawing something on the screen. As a general best practice don't load -any- javascript in the head. Only at the end of the body tag right before `</body>`
chucksmash 12y ago
CSS files must be in the head element. JS files can be in either the head or the body.
- chucksmash 12y ago
  (Though IIRC all linked resources in the head are retrieved and processed prior to rendering so unless your JS is crucial to correct display of the page your preference should be to load JS as late as possible.)
madeofpalk 12y ago
Basically because of document.write(), the browser has to download and execute a script tag before it can move on to rendering the rest of page.
DougWebb 12y ago
In every real project I've done, where a nested templating system is used to generate the markup and templates might contain javascript code, I always load some javascript libraries in the head. Typically that's Modernizr and jQuery, and if I'm using them jQuery Validate and Microsoft's jQuery Unobtrusive Validation. This lets my templates contain initialization functions inside of $(document).ready(function() {...}); calls without running into a "$ not defined" error. The alternative would be to somehow bubble up from my templates a list of initialization functions to call, or to have every page load run through a bunch of tests to find things that need to be initialized. I think the tradeoff of loading jQuery early is worth it, especially since I usually load it from Google's CDN so it's probably cached.

sergiotapia 12y ago

Yep. If you link a javascript file your browser needs to parse that URL, open the connection, download the asset, etc. all before drawing something on the screen. As a general best practice don't load -any- javascript in the head. Only at the end of the body tag right before `</body>`

chucksmash 12y ago

CSS files must be in the head element. JS files can be in either the head or the body.

chucksmash 12y ago
(Though IIRC all linked resources in the head are retrieved and processed prior to rendering so unless your JS is crucial to correct display of the page your preference should be to load JS as late as possible.)

madeofpalk 12y ago

Basically because of document.write(), the browser has to download and execute a script tag before it can move on to rendering the rest of page.

DougWebb 12y ago

In every real project I've done, where a nested templating system is used to generate the markup and templates might contain javascript code, I always load some javascript libraries in the head. Typically that's Modernizr and jQuery, and if I'm using them jQuery Validate and Microsoft's jQuery Unobtrusive Validation. This lets my templates contain initialization functions inside of $(document).ready(function() {...}); calls without running into a "$ not defined" error. The alternative would be to somehow bubble up from my templates a list of initialization functions to call, or to have every page load run through a bunch of tests to find things that need to be initialized. I think the tradeoff of loading jQuery early is worth it, especially since I usually load it from Google's CDN so it's probably cached.