Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 7 years ago.
In the Best Practices to improve web site Performance http://developer.yahoo.com/performance/rules.html, Steve Souders mentioned one rule "Move Scripts to the Bottom". It's a little confusing. Actually, I notice that a lot of web pages that doesn't put script at bottom, while YSlow still mark A for these pages.
So, when should I follow the rule "Put Scripts at the Bottom"?
When a user requests a page from your site, the page HTML starts streaming to the browser. As soon as a browser encounters a tag for an external image, script, CSS file, etc., it will start downloading that file simultaneously.
If you put your scripts at the bottom of a page, they'll be loaded last. In other words, the HTML content/structure/css/images of youe page/app will be loaded first, and something can show up in the browser faster; Your users don't have to wait for a script to finish downloading before they see something in your application.
The reason why pages that have scripts at the top of the page still score an 'A' is because this is not as important as other performance improvements that could be made.
Each rule is weighted, so some rules affect the ySlow grade more than others.
I always put scripts at the bottom. There are very few reasons for needing scripts at the top of your page. The only reason I can think of is you need your JavaScript to execute immediately before anything else in the page, which is quite rare.
Sometimes, you have no choice but to put scripts at a specific location in page. However, if you put scripts at the bottom of the page, the browser won't interrupt its rendering to load JS engine to process your script (which might be costly, if you have loops running for large number of times) and will probably display an early view of the page sooner.
I'm not sure it's a performance issue (could be), but I was at a presentation given by Microsoft, and the presenter said that web spiders sometimes only read the first x amount of characters on a web page to index it. So, if you have a large amount of scripts, your content may not be reached and indexed properly (and your site's page rank won't be as high).
The code may reference DOM objects that haven't been instantiated yet is the most obvious reason I can think of.
