Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I know that it is recommended to put Javascript at the bottom of the page, but if I'm using jQuery doesn't this defeat its purpose to run as the DOM is loading?

If I have a dropdown menu, for example, the dropdowns won't show until all the rest of the page has loaded. I also try to develop with progressive enhancement in mind, so I might have elements that are hidden with jQuery instead of CSS (so non-JS users can see them).

Is there a happy medium, perhaps?

share|improve this question
    
I'm having the reverse problem. I have a script which creates and positions a sidebar, but unfortunately the page is being rendered before my script is run, resulting in an unsightly jerk as page elements are redrawn in the new locations. Is it possible to block rendering until my script is done, or otherwise have my size and position stuff run before the first render? –  user6473 Mar 31 '11 at 14:26
2  
Doesn't this question belongs more to StackOverflow? –  Marco Demaio Mar 31 '11 at 14:37
add comment

4 Answers

up vote 29 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
Not entirely true. Script can alter the DOM before all the HTML is loaded... In fact that is why scripts are blocking because they can alter the page. That said, in many cases developers don't need to add their 'behavior' script until the DOM is loaded. –  scunliffe Jul 17 '10 at 1:53
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.