jQuery: Why use document.ready if external JS at bottom of page?

Question

I am including all of my JS as external files that are loaded at the very bottom of the page. Within these files, I have several methods defined like so, which I call from the ready event:

var SomeNamepsace = {};  SomeNamepsace.firstMethod = function () {     // do something };  SomeNamepsace.secondMethod = function () {     // do something else };  $(document).ready(function () {     SomeNamepsace.firstMethod();     SomeNamepsace.secondMethod(); }); 

However, when I remove the ready function and call the methods straight-up, everything works just the same, but executes significantly faster—almost a whole second faster on a pretty basic file! Since the document should be loaded at this point (as all the markup comes before the script tags), is there any good reason to still be using the ready event?

Answer 1

Great question.

There is some confusion around the whole "put scripts at the bottom of your page" advice and what problem(s) it attempts to solve. For this question I am not going to talk about whether putting scripts at the bottom of the page affects performance/loadtimes or not. I am only going to talk about whether you need $(document).ready if you also put scripts at the bottom of the page.

I'm assuming you are referencing the DOM in those functions you are immediately invoking in your scripts (anything as simple as document or document.getElementById). I'm also assuming you are asking only about these [DOM-referencing] files. IOW, library scripts or scripts that your DOM-referencing code requires (like jQuery) need to be placed earlier in the page.

To answer your question: if you include your DOM-referencing scripts at the bottom of the page, No, you do not need $(document).ready.

Explanation: without the aid of "onload"-related implementations like $(document).ready the rule of thumb is: any code that interacts with DOM elements within the page should to be placed/included further down the page than the elements it references. The easiest thing to do is to place that code before the closing </body>. See here and here. It also works around IE's dreaded "Operation aborted" error.

Having said that, this by no means invalidates the use of $(document).ready. Referencing an object before it has been loaded is [one of] the most common mistakes made when beginning in DOM JavaScript (witnessed it too many times to count). It is jQuery's solution to the problem, and it doesn't require you to have to think about where this script will be included relative to the DOM elements it references. This is a huge win for developers. It's just one less thing they have to think about.

Also, it's often difficult or impractical to move all DOM-referencing scripts to the bottom of the page (for example any script that issues document.write calls have to stay put). Other times, you are using a framework that renders some template or creates pieces of dynamic javascript, within which references functions that need to be included before the js.

Finally, it used to be "best practice" to jam all DOM-referencing code into window.onload, however it has been eclipsed by $(document).ready implementations for well document reasons.

All this adds up to $(document).ready as a far superior, practical and general solution to the problem of referencing DOM elements too early.