Benefits of loading JS at the bottom as opposed to the top of the document
JavascriptJqueryHtmlJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
-
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.
-
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.
Solution 2 - Javascript
As scripts that are referred to are being downloaded, browsers typically won't download other files in parallel, thus slowing the page load.
Solution 3 - Javascript
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:
- High Performance Web Sites: Rule 6 - Move Scripts to the Bottom
- Rails Best Practices: Scripts at Bottom
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.
Solution 4 - Javascript
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