JavaScript on the bottom of the page?

Question

I've read that it is better to keep all of your JavaScript files on the bottom of the webpage. The HTML5 Boilerplate template seems to agree: http://html5boilerplate.com/

And seems to be widely used.

My question is: first, does this have any real basis? I've done testing in Firebug and it seems to have some small effect, but is it trivial? Images and other sources don't seem to start loading until CSS files and script files have loaded, but sticking them on the bottom doesn't seem to make much difference in this at all.

Pazia

Most scripts require the DOM loaded which is not guaranteed if you have them on the top of the page. There are exceptions to this though, for some reason modenizer.js needs to be added to the top of the page as it needs to execute before the DOM is fully loaded. When using jQuery document ready for example it triggers when the DOM is fully loaded but before the images. However, when using window ready it triggers after the images are loaded too. – Discipline

Good rationale on JavaScript location in the page at robertnyman.com/2008/04/23/…. – Shrift

Answer 1

It is very important for best practice reasons.

When you have scripts loading in your header, they stop other downloads from taking place! This includes your styling, and will also stop your images from downloading until the script has finished.

This is because JavaScript files load synchronously.

Also note that you will get a flash of unstyled content (FOUT) during loading if you do not move your JavaScript files to the bottom of your page. This is because your CSS will not download until the script has finished loading.

---

Here is an excerpt from Yahoo performance rule 6.

The second problem caused by scripts is blocking parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. (I've gotten Internet Explorer to download over 100 images in parallel.) While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

---

References

http://developer.yahoo.com/performance/rules.html/

Especially note rule 6.

Taka

@underbar Thanks for the heads up, ill include that in my answer – Taka

Note there are exceptions. Some scripts require to execute first and need to be on top of the page. Modernizr.js being one of them. No idea why though. – Discipline

Modernizr has to be loaded in the head, because after it does its feature detection it adds classes to the body element so that you can fork your CSS based on whether some feature is available. You want these classes to be added ASAP, so that your CSS takes the correct form right when the content loads in. – Endplay

What if we add Script tags after css link tags, but still at head, will that still be a problem ? Because that is how I was using it, I use window.onload event to start executing js, which only executes after the page loads completely and does not get any element not found error. Works fine for me. – Exsert

Answer 2

We recently had this debate at the office. I wrote a lengthy post where I lay down my opinion on the subject. The short answer is that it really depends on what you're making. For content oriented web pages, bottom placement seems to work best. However when one is creating web applications where functionality is the main priority, placement at the top has it's advantages.

Immersionism

+1 all the responses and blogs and opinions I've seen on the subject pretty much repeat the same 3 facts over and over. You are the first person to give a real world "depends on what you're doing" kinda statement. Well Done. – Trisect

Answer 3

JavaScripts load synchronously. Pair that with generally larger file sizes, and you have content that is being delayed in loading because of the synchronous JavaScript loading. If you put the JavaScripts at the bottom of the page, then everything else is loaded first and the JavaScript loading can't block anything.

Dryfoos

Answer 4

Basically, when the browser hits a <script> tag, it stops loading the rest of the document until that <script> is loaded and executed.

Lasonde