views:

1308

answers:

5

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

+4  A: 

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.

Mehrdad Afshari
Can you give an example of when "you have no choice but to put scripts at a specific location in page"?
Draemon
@Draemon: for instance, using `document.write` in the middle of the page to generate some tags. Yes, you can wait for the page to load and then set the `innerHTML` of some element. That's not what I mean. I meant being able to put scripts at bottom, *without* refactoring the code.
Mehrdad Afshari
Ok, I'd call that kind of code broken. I don't see why you would expect not to change the code, but technically I take your point.
Draemon
+1  A: 

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).

Pwninstein
+2  A: 

The code may reference DOM objects that haven't been instantiated yet is the most obvious reason I can think of.

le dorfier
Code doesn't have to run immediately when it loads. You can delay the running by having the functions called on an event later
MarkR
Yes, that's another way, but not necessarily the best. Don't use a workaround if you can avoid the problem with good coding style. And then you've got the possibility of framesets, etc.
le dorfier
+3  A: 

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.

Ryan Doherty
+2  A: 

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.

Alan Storm