Is "Put Scripts at the Bottom" Correct?

javascript performance yslow
Morgan Cheng picture Morgan Cheng · Dec 20, 2008 · Viewed 24.2k times · Source

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"?

Answer

Alan Storm picture Alan Storm · Dec 20, 2008

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.

Related questions

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
What is the difference between call and apply?

What is the difference between using call and apply to invoke a function? var func = function() { alert('hello!'); }; func.apply(); vs func.call(); Are there performance differences between the two aforementioned methods? When is it best to use call …

Read More
How to efficiently count the number of keys/properties of an object in JavaScript?

What's the fastest way to count the number of keys/properties of an object? It it possible to do this without iterating over the object? i.e. without doing var count = 0; for (k in myobj) if (myobj.hasOwnProperty(k)) count++; (…

Read More