: Does "putting Javascript at the bottom" defeat the purpose of document.ready? I know that it is recommended to put Javascript at the bottom of the page, but if I'm using jQuery doesn't this

@Shelley277

Yes. If you put scripts at the bottom, doc.ready (DOMContentLoaded event) isn't needed anymore — your script will be executed after all preceeding DOM is loaded anyway.

Since scripts at the end improve performance (HTML parsing and loading of CSS and images isn't blocked by the scripts) I recommend putting scripts at the bottom instead of using doc.ready.

Vote Up Vote Down

@Marchetta884

A script has no actual use until the HTML has finished loading - a script can’t change the DOM until the HTML has loaded. document.ready waits for the DOM to load. So, there's no point it holding up important things like stylesheets.

Put the scripts at the bottom of the page (before the </body> tag) to order to get your HTML and CSS to the user as quick as you can. The browser will be able to render the page much quicker and then scripts can be loaded, rather than leaving a blank page for the user to stare at whilst they wait for scripts to download.

While the browser is progressively rendering the page, if it hits a script tag (i.e. a external Javascript file) everything stops. Scripts have the right of way - while a script is downloading, the browser won’t start any other download. i.e. Images and stylesheets and any other parallel download will be blocked, even on different hostnames.

The disadvantage of putting scripts at the bottom of the page is that because the page will render before scripts have initialised, particularly quick clickers will be able to interact with your site before the Javascript is ready.

Note: The opposite is true for Stylesheets - Stylesheets near the bottom of the page block progressive rendering until all stylesheets have been downloaded and moving them to the document HEAD eliminates the problem.



There is a neat trick in order to load javascript without making the user wait, you can create a <script/> element using the DOM createElement() method and add it to the page just before the closing </body> tag:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);


The browser doesn't start downloading the js script until the new <script/> element is actually added to the page. Once the download is complete, the browser interprets the Javascript code contained within.

Vote Up Vote Down

@Ogunnowo487

Putting javascript at the bottom means that the other page content (text especially) loads before the javascript so users are not waiting for the JS to load if they have slow connections.

This does not affect document.ready, as that is called when the browser has finished preparing the DOM for a page. Either way, everything still needs to be loaded first.

Vote Up Vote Down

@Candy875

Document.ready waits for the DOM to load before running any JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

The idea of putting it at the bottom, means that if your JS is having issues or the person has a slow connection, the rest of the page still loads first, and doesn't "hang".

The JS still runs when everything has loaded, whether it's at the start or finish.

Vote Up Vote Down