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.
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.
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.
Especially note rule 6.
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.
Basically, when the browser hits a
<script> tag, it stops loading the rest of the document until that
<script> is loaded and executed.
©2020 All rights reserved.