Putting JavaScript at the End of a Page - J Query

Problem
As a project grows in size, often the amount of JavaScript it contains grows as well. This results in slower page load times. Combining several disparate JavaScript files into one monolithic file, using minification, and using compression can help reduce the JavaScript size and reduce the number of HTTP requests made. But, one will always be left with some amount of code to load. It would be nice if the impact of this code on perceived load times could be reduced.

Solution

A user perceives load times based on what they see on the screen. A browser has a limited number of HTTP connections at its disposal to load external content, such as JavaScript, CSS stylesheets, and images. When JavaScript is placed at the top of the document, it can delay the loading of other visible resources. The solution is to place your JavaScript files at the end of your page:

Discussion
By placing the JavaScript just before the closing <body>tags, any images or CSS stylesheets that are referenced previously in the document are loaded first. This won’t cause the page to load any faster. However, it will decrease the perceived load time. Visible elements will be given priority over the JavaScript code. Loading the JavaScript files late in the page doesn’t incur any drawbacks because it generally shouldn’t be executed until the entire page is loaded.
No benefit is gained from putting the inline JavaScript at the end of the document. It is placed there in this example because the jQuery function can’t be called until jquery-1.3.2.min.js is loaded. If we placed the inline JavaScript in the <head>element,an error would be generated because of jQuery not being defined.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics