Move jQuery to the end of body tag?

Question

My friend read an article on net which mentioned that move all JavaScript file to the end of body closing tag (</body>), this is a valid point to move all JS files to the end of body tag.

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.

Please tell me that is it possible to move JQuery library file to the end of page right before closing body tag (</body>) ??

Thanks

Answer 1

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.

Answer 2

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 3

Just take in account that the jQuery JavaScript file must be loaded before any call to the $(...) function.

Answer 4

Use unobtrusive javascript (adding event listeners to elements instead of onclik ="..." etc). Put all your .js files at the bottom of the body tag, with the main library (jQuery in this case) placed first, and everything will be fine. You can use a bundler like bundle fu

You will see a big performance boost of loading your page.

Answer 5

Q - Why do I often see JavaScript written/included before the closing body element in an (x)HTML document?

A - DOM elements can not be accessed by JavaScript until the browser has loaded the HTML elements into the DOM. By placing JavaScript at the end of an (x)HTML document (before the closing body element), you will ensure that the script is called as soon as the DOM is constructed/loaded and ready for manipulation. An advantage of this approach is that JavaScript code is executed right after the DOM is constructed and possibly before the onload event would fire.

JavaScript beginners get tripped up by this constantly by placing code that manipulates the DOM in the header element of an (x)HTML document. This causes an error because the DOM has not yet been constructed and thus is not yet accessible to JavaScript that traverses/manipulates the DOM.

From JavaScript Execution & Onload Techniques in Web Browsers

Answer 6

The reason that article asked you to move scripts to the bottom, is to allow other artifacts to get downloaded first. (css & images, which will speed up apparent rendering times)

This is because HTTP 1.1 recommends only downloading 2 items per hostname. And you would definitely want your css file to be one of the first files downloaded, rather than javascript which could make the site appear to render slower (just by the fact that the browser hasn't got the css file yet and isn't sure what it should do with the html)

But if you used google to host your jQuery then that would download in parallel and negates any reason for moving it to the bottom of your pages.

Alternatively, you could set up a second hostname to host static content (such as css/scripts/images).

But google have already done the hard work for you, so it makes sense to use it if it suits. :-)