jQuery: Move JavaScript to the bottom of the page?

Question

We are developing large ASP.NET applications with lot of dynmically created pages containing ASCX controls. We use a lot of jQuery everywhere.

I have been reading that it would make sense to move the inline JavaScript code to the bottom of the page as it could delay the loading of the page when it's included "too early".

My question is now: Does this still make sense when working with jQuery?

Most of the code is executed in the ready handler, so I would expect that is does not slow down the loading of the page. In my case the multiple Usercontrols ASCX have all their own jQuery bits and pieces, and it would not be easy to move that all down in the rendered page.

Answer 1

Placing scripts late in the HTML is recommended because loading and executing scripts happens sequentially (one script at a time) and completely blocks the loading and parsing of images and CSS files meanwhile.

Large/lagged/slow-running scripts near the top of the page can cause unnecessary delay to the loading and rendering of the page content/layout.

Script's size (download time) and complexity (execution time (dom traversal, etc.)) factor in - but more importantly, the number of individual <script> HTTP requests matters far more (the fewer requests the better).

Using the "document.ready" handler lessens the delay caused by slow execution - but still leaves the problem of the sequential HTTP overhead.

Recommended reading: High Performance Web Sites by Nate Koeckley.

Answer 2

You could model the different ways of ordering the JavaScript in Cuzillion to see how it affects page loading.

See the examples and this blog post for examples of how ordering of page elements can affect speed.

Answer 3

When you include JS then the loading of the page from that point will defer because of that the JS file might contain a "document.write" statement.

This means that the entire page will STOP being rendered from the point where you include your JS files and make the browser go "white" or something (at least not display the rest of the page) so the short answer is definitely yes ...!

(Longer answer is "probably" with 99% probability)

As in move the inclusion of JS (and also inline JS - which you shouldn't use BTW) to the bottom...

When that's said if you're on ASP.NET you shouldn't use jQuery but rather Ra-Ajax which BTW have all these "best practices" automagically included for you...

Answer 4

Most of the time, the reason to move your JavaScript to the bottom of the page is to ensure that any DOM elements the JavaScript might reference have been created before the JavaScript is run. This also ensures that the page has time to render before running any JavaScript.

In this case, I wouldn't worry about moving the JavaScript down lower on the page.