Benefits of loading JS at the bottom as opposed to the top of the document

60
votes

What are the real benefits (if any) to loading your JS at the bottom of the document, as opposed to the top. It seems there is a brief delay in page loading and JS dependent functionality.

I am using html5boilerplate for beginning all my templates, but am not really sure on how beneficial loading the JS at the bottom is.

Does it really make all that much of a difference, and if so, why?

4
javascriptjqueryhtml
The browser stops rendering the page until each block of JavaScript has been executed. For small JavaScript blocks, this isn't a big problem. However, for large libraries, page load time could be substantially increased. – a'r
This really depends on what you are doing, but the Network tab in the Chrome Developer Tools (F12) show you how long your page is taking to load, and which files are taking the longest. – Karl Gjertsen

4 Answers

54
votes

  1. If you include external js files at the bottom of your page, you give the priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics. I believe, if you do not use a content delivery network to deliver images to the client then you are only allowed to process a maximum of 2 HTTP requests at a time. You do not want to waste these requests on logic because we all know how impatient the end user is.

  2. By loading js at then end of the file you can access the DOM(most of the time) without having to call a document.ready() function. You know that if the page render finally makes it to your javascript code that the necessary page elements have usually loaded already.

There are a few more reasons out there but these are the important ones that I try to remember when it feels so awkward to place all js at the bottom.

9
votes

As scripts that are referred to are being downloaded, browsers typically won't download other files in parallel, thus slowing the page load.

refer: Best Practices for Speeding Up Your Web Site

6
votes

A Google search will return a large number of results as to why you want to do so and what improvement you'll see. Check out some of these following links:

Basically, the main reason for doing so is that you'll improve render times of your page. From the first article:

[I]t’s better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization.

4
votes

depending on what is in the js. if only want it to 'go' when the page loads either surround your code by jquery's: $(function(){}) or place it at the bottom of the page