JavaScript Placement

While early JavaScript needed to be jumbled with the HTML in order to interact with it, modern JavaScript can be placed entirely in an external file and attached into the page with a single script tag. There are four points during the loading of a web page where most Modern JavaScript needs to run and it is this which determines the most appropriate place to place the script tag.

The very small number of scripts that belong to the first of these four groups make up the entire group of scripts where there is a benefit to attaching the script to the head of your web page. Attaching it there means that the code can be loaded and run as soon as possible. Such scripts generally redirect some visitors so that the current page gets replaced by another page (such as a framebreaker script that replaces the current page by the content of the current frame without the other frames). Ideally this will happen soon enough that your visitor will not even realise that the redirect has taken place.

For all three of the other groups (two of which contain almost all of the scripts you would ever use) placing the script tag at the bottom of the body

The first consideration in placing the script tag at the bottom of the body whenever possible relates to how the HTTP protocol works for browsers to load the files (CSS, images etc) associated with the web page. With the exception of one type of file, early browsers could load up to two files at a time per domain. More modern browsers can now generally load up to eight files at a time with that same exception. By loading files simultaneously the files can be loaded much faster than if they were loaded one after the other because the limiting factor on how quickly a file can be delivered to your browser is not the capacity of your internet connection and so downloading multiple files will better utilise that capacity and get the files loaded faster. The same web page will finish loading a lot quicker on the same internet connection in a browser that allows eight files to download simultaneously than it will in a browser that only allows two files to download simultaneously.

The one exception is JavaScript files. Because of requirements relating to the now obsolete (but unfortunately still used by those still writing JavaScript as if it were the 20th Century) document.write statement, browsers will not download anything else while JavaScript is downloading (this is because JavaScript containing document.write statements can actually impact on which files the page needs to have downloaded). As soon as the browser gets to the script tag it will stop requesting the download of additional files and will wait until all of the files currently downloading have finished. It will then request the JavaScript file and wait until it finishes downloading before resuming with requesting additional files to be downloaded.

Having your JavaScript in the head of the page therefore makes the entire page wait for the JavaScript to download before any of the other files the page needs can even be requested. As only the first of our four groups of JavaScript actually needs to be able to run at that point in the loading of the web page, that group are the only scripts where we need to have the script tag in the head. In all other instances, we can speed up the loading of our web page significantly by moving the script tag to the bottom of the body so as to allow the browser to request all of the other files that the page needs before it requests the JavaScript. This allows all of the other files to be downloaded as quickly as possible and reduces the time that the entire page takes to load to a minimum.

Placing the JavaScript at the bottom also does away with the need to test if the page has loaded before running our script in most cases. No longer do we need to attach our code to window.onload (or the event listener equivalent) because with our JavaScript placed at the bottom of the body we know that the HTML has finished loading and that most if not all of the other files will have finished loading as well. For the large number of scripts in the second group running the code straight away when the script is attached to the bottom of the page runs it at the earliest possible moment that the code can be successfully run without needing to attempt to test if the HTML has finished loading (something that not all browsers support) because the placement of the script guarantees that the HTML has already loaded. Similarly the smaller number of scripts in the third group can be run straight away as well as in most cases all of the files they require will have already loaded as well and unless the script will completely break if some other file has not downloaded running the script straight away at this point will do no harm. In the rare instance where such a script can break then you can add back in the test for the page having loaded while keeping the script at the bottom of the body since everything in the page has to finish loading before the load event is triggered and so it doesn't matter where in the page such a script is located from the viewpoint of running it while placing it at the bottom still allows the page to load faster.

The fourth group of scripts that run in response to events are also best attached to the bottom of the page. The likelihood of someone triggering an event before the page finishes loading is relatively small, particularly if the page loads more quickly as is the case with the script at the bottom. In many cases attaching such a script to the head of the page would cause the script to crash if it were triggered before the page had finished loading and so attaching it to the bottom of the body produces the more acceptable result of having events triggered too early being treated as if Javascript isn't enabled rather than having the JavaScript attempt to run before everything it needs to interact with is there.

The benefit to be gained in speeding up the loading of the web page is a good enough reason to put the scripts at the bottom of the body. That in most cases it simplifies the JavaScript and reduces the possibility of script crashes is a bonus.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow