Should javascript code always be loaded in the head of an html document?

Question

Is there a blanket rule in terms of how javascript should be loaded. I'm seeing people saying that it should go on the end of the page now.

Thoughts?

Answer 1

The thought behind putting it at the end of the document is to ensure that the entire contents of the document have been downloaded prior to any attempts to reference elements in it. If the JavaScript was loaded first it is possible that code could go looking for elements when the document was not ready.

jQuery addresses this issue with the ready function:

Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.

This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications.

There are also performance considerations that suggest including JavaScript files at the bottom of the page - this is due to the fact that downloading a JavaScript file may block all other HTTP requests (for images, CSS, etc.) until it is complete.

Answer 2

Well there are two cases (at least) depending on what do you want to achieve. If you need the functionality incorporated in the script or scripts, like function libraries, available before or during page loading then you should load JavaScript code in the head tag. If you need to do something that needs some resources that are made available only after the page is loaded (DOM resources that is) than you should load the script/s at the bottom of the page (this can also be solved using onDOMReady events that are already available in most of the JavaScript frameworks). There could be also some performance issues that could dictate your decision. For instance there are situations when loading the script or scripts in the head tag would slow down the page rendering and if you can provide basic functionality with page rendered until the script are fully functional then again the script or scripts should be loaded at the bottom. It is more or less a decision based on what you need to do.

Answer 3

There is no rule : if you want the Js to be loaded first, you put it in the head. If you want it to be the last thing the browser load, you put it at the bottom.

For websites getting usuable with JS, you probably want to put it at the top, in head. For web sites that degrade nicely, you'll follow Yahoo! recommandations and let the page render, then load the script.

N.B : this has nothing to do with executing the script before or after the DOM is loaded. This issue is not a real one, most of the time you use onload or a $.ready equivalent. This is about when the file is actually loaded, not executed.

Answer 4

If you need to use javascript to run some special logic while the document is still loading, you can put minimal code at the top. But practically all usage of javascript in today's rich web applications is required after the document is ready, hence the <script> tags can be safely put after </body>.

Here is a very relevant read: http://developer.yahoo.com/performance/rules.html

Answer 5

I like to minimize my code into a single file when I deploy to production. So, during development, I create a single file for each JavaScript class and load each in the head (after the CSS files). Since I wait for an event from the browser indicating the DOM is ready, I place my JS file in the head of the only HTML/JSP page.