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.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
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
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
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.