what is the difference / advantage / disadvantage of writing script at the bottom of the page and writing the script in
If you include your
script tag in the
head and rely on
ready, the browser encounters your
defer attributes on
If you include your
script tag at the end of the
body element, the browser doesn’t do all of that until your page is largely already displayed to the user. This improves perceived load time for your page.
So to get the best perceived load time, put your script at the bottom of the page. (This is also the guideline from the Yahoo folks.) And if you’re going to do that, then there’s no need to use
ready, though of course you could if you liked.
There’s a price for that, though: You need to be sure that the things the user can see are ready to be interacted with. By moving the download time to after the page is largely displayed, you increase the possibility of the user starting to interact with the page before your script is loaded. That’s one of the counter-arguments to putting the
script tag at the end. Frequently it’s not an issue, but you have to look at your page to see whether it is and, if so, how you want to deal with it. (You can put a small inline
script element in the
head that sets up a document-wide event handler to cope with this. That way, you get the improved load time but if they try to do something too early, you can either tell them that or, better, queue the thing they wanted to do and do it when your full script is ready.)
Your page will load slower by scattering
$(document).ready() scripts throughout the DOM (instead of all at the end) because it requires jQuery to be synchronously loaded first.
$ = jQuery. So you can’t use
$ in your scripts without first loading jQuery. This approach forces you to load jQuery near the beginning of the page, which will halt your page load until jQuery is fully downloaded.
async load jQuery either because in many cases, your
$(document).ready() script(s) will try to execute before jQuery is fully async loaded and cause an error, because again,
$ isn’t defined yet.
That being said, there is a way to fool the system. Essentially setting
$ equal to a function that pushes
$(document).ready() functions into a queue/array. Then at the bottom of the page, load jQuery then iterate through the queue and execute each
$(document).ready() one at a time. This allows you to defer jQuery to the bottom of the page but still use
$ above it in the DOM. I personally haven’t tested how well this works, but the theory is sound. The idea has been around for a while but I’ve very, very rarely seen it implemented. But it seems like a great idea: