Had an interesting comment posted on my blog overnight which suggested the following: To place all javascript code at the end of your HTML page, rather than in your <HEAD> tag to improve performance. On face value this doesn’t really tell me much, so hopefully within this article I can clarify a few approaches that can apparently improve page load performance.
Don’t write inline code if possible
The first approach is less obvious but can have a detrimental affect to page loading times. By writing javascript code inline, ie within the HTML document itself, the browser downloads and reads that chunk every time. By hosting your script in an external file, local or outside of your domain, the browser can better cache this, enabling faster read access, as well as allowing the browser to ignore it if necessary and continue downloading other assets that are new.
Placing scripts at the bottom of the HTML document
It turns out its actually better to place scripts at the bottom of the HTML document. But why is this? It appears that the HTTP 1.1 specification is the culprit. According to the document, whilst a browser can download only 2 resources from any 1 hostname at one time (2 images for example), when downloading scripts, the browser cannot download anything else at all.
One immediate work around that you may think is possible is to host the content externally, say for example referencing the jQuery library on the Google code repository. The trouble is, even if the script is on an external hostname, the browser still cannot download anything else when it accesses it. Whilst this approach is still good from a bandwidth and caching perspective, it doesn’t really help our page load times if that document hasn’t previously been cached.
Anyway, therefore, there is in theory a period of time where the browser is downloading your scripts one at a time, and doing nothing else. Depending on the size of your scripts this could be quite a significant lag. The answer to this is to place the scripts at the bottom of the HTML document.
So by moving your scripts to the bottom it therefore enables the browser to deal with the HTML document and its remaining assets in as faster time as possible. This obviously has its drawbacks, especially if you are writing your HTML document with javascript – however you can get around this.
Let the document download as is, and use a library like jQuery to manage the document manipulation with its $(document).ready() function. Place your code within the function to manipulate your HTML document before it is presented to the user.
Why aren’t people doing it?
This is where this all gets confusing for me… Alot of the big guys just aren’t doing it. For example, the jQuery official website has everything in their <HEAD> tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://static.jquery.com/files/rocker/scripts/custom.js"></script>
I would have thought that being so focussed on performance, they would have done something like this, so why aren’t they? Perhaps the code in their custom.js has to be in the <HEAD> for whatever reason, or maybe I am misunderstanding the benefits to putting your scripts at the bottom of the HTML document?
Tools to help you learn…
 Learning jQuery 1.3 |
 Amazon Kindle 2 |
 jQuery UI 1.6 |
Similar Articles:
Top 10 Developer Top 10s
Javascript and DOM Load Time Tester with jQuery
Top 10 jQuery Plugins (according to reynoldsftw.com)
Reformat URLs with Javascript and Regular Expressions
5 Javascript Chart Alternatives
Tags: Javascript, jQuery, performance
jsrocks by amy hoy and thomas fuchs is still in beta, but seems to be a good book on js performances (load time and run time are both in the book) :
http://javascriptrocks.com/performance/
enjoy !
Thank you ALOT! Was having a problem with IE error “Operation aborted”, But after putting them more down, the site worked perfectly! Great workaround I couldn’t find without this (-:
Is this really plausible though? It would seem odd this technique would increase page load time if the browser is waiting for jQuery to complete it’s operations before presenting the page to the user anyway, or am I missing something?
Hey,
Nice article. I was reading the other day in the jquery website that there is a bug that you have to put your jquery files in the head and nowhere else. I thought that was really odd. I know it’s free, but someone as big as that…I would think they would have figured out what the problem is….anyways….those are my 2 cents heh
thanks…