28

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?

0

5 Answers 5

32

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.

7

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.

4

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.

1
  • 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, 2010 at 1:53
1

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.

-1

If you're using JavaScript that binds to HTML elements, then the HTML has to load first.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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