Hello,
I have a quick question. I don’t remember from where, but once I read that putting the javascript bottom or the head of an html document can help it load faster. Is this true?
Also if you have some server-side languages in that html document should javascript be underneath or after that as well?
I guess my ultimate question is that does putting js at the bottom of the <head> make the page faster or is it the closer the javascript is to the bottom of the <head> the faster the page will load?
Actually, the current recommendation is to put JS links just before the closing </body> tag. That way, the page (HTML/CSS) gets to load visually without being held up by all the JS stuff—and you also avoid the problem of the JS having no HTML elements to apply itself to.
No, they can be anywhere. Those recommending the JS links be put just before the closing </body> tag include some of the most prominent “standardistas”.
oh okay. so what I have now learned is that <link />s are in the head and <script>s can be anywhere. Its best to put them just before the closing head tag (</head>) or closing body tag (</body>). Is this correct?
The current thinking is that <script>s are best placed just before the closing </body> tag, but I’ve not heard that if they are in the <head> section they should be just before the closing tag, but I guess it makes some sense—at least from an organizational point of view. But yes, <link> should always be in the <head>.
Honestly, each placement has it’s own ‘job’ – and depending on what I want it to do is likely where I’ll place it. For example, if a script is running at ‘onload’ it doesn’t matter where you put it, it can’t execute until everything else is done… if it’s a library that has to be loaded before it can be run in the first few lines of BODY, putting it right before /BODY means it’s going to break… on the other hand if it’s going to modify markup and you want it to run BEFORE onload as it say… modifies the markup in a manner you want applied before CSS loads (that way you only get one FOUC instead of TWO), then it goes before /BODY.
The last of those is the real reason I often put scripting right before </body> – FOUC is bad enough for CSS or images applied via the CSS, without something like dynamic content or scripted controls suddenly popping in AFTER the CSS is applied – waiting for onload can literally be like a second “Flash of unstyled content”. (part of why I don’t really use onload anymore)
This is one of those cases where I think people are looking for a “always do this” which is the wrong question. It’s just not that simple an answer and is part of why it’s called “work” and not “happy happy fun time”.
