Move jQuery to the end of body tag?

Question

My friend read an article which mentioned that moving all JavaScript files to the end of the closing body tag (</body>), will improve the performance of a web page.

I have moved all JS files to the end except the JQuery and the JS files which are attaching event to an element on page, like below;

$(document).ready(function(){
    //submit data
    $("#create_video").click(function(){ //... });
});

but he's saying to move the jQuery library file to the end of body tag.

I don't think it is possible, because I am attaching many events to page elements on load using jQuery selectors, and to use jQuery selectors it is must to load jQuery library first.

Is it possible to move JQuery library file to the end of page right before closing body tag (</body>) ??

Thanks

Answer 1

It's standard practice to move all your js includes to the bottom of your page. This is because when a browser loads script, it does not spawn a new thread to do so, so basically the browser will wait until it has loaded the script before it proceeds to the next line.

What this means for your users is that they will see a blank screen. Much better to have them see the full(ish) page as then it doesn't look like it has stalled.

Answer 2

The $(document).ready function says not to run until the DOM has finished being instantiated - so moving it to after body is okay so long as the JQuery library is loaded first. Unconventional and some assumptions may not be correct anymore but okay.