Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is "Put Scripts at the Bottom" Correct? [closed]

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

like image 714
Morgan Cheng Avatar asked Dec 20 '08 07:12

Morgan Cheng


People also ask

Why scripts are placed at bottom of the page?

When you place your JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.

Does it matter where you put script tags?

The script tag should always be used before the body close or at the bottom in HTML file. The Page will load with HTML and CSS and later JavaScript will load.

Where is the correct place to put the script tag?

You can place any number of scripts in an HTML document. Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.

Does script go before or after body?

Always end with a body tag and make sure every single JavaScript part is within the body tag. You can also have links or scripts inside head tags, but it is not recommended unless you are really certain your JavaScript code is too big to have it inline.


1 Answers

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.

like image 69
Alan Storm Avatar answered Sep 23 '22 08:09

Alan Storm