Learn Modern Unobtrusive JavaScript - Alternate Tag Location

Learn Modern Unobtrusive JavaScript

Alternate Tag Location

In the tutorials that I have written about JavaScript and also in all of the scripts that I have written that use unobtrusive techniques, I always place the script tag in the head of the web page. There are a number of other people who always place their script tag at the very bottom of their web page immediately before the closing body tag. That position for the script tag is just as unobtrusive as the one I use but has an impact both on the order in which the components of the web page download and on when your JavaScript gets run.

Where your script tag is in the head of the page, all of the content that you want to have able to access the DOM needs to either wait until the load event on the window is triggered or needs to use something like the Faster DOM access script that I mentioned in the fourth tutorial to test for when the particular element within the web page has loaded. In this latter case the processing can run as soon as the appropriate element loads without having to wait for all the content of the page to load. The trade off for this is that you have a script running that is performing regular tests until it can find those elements which has an impact on how quickly the browser can download the rest of the page.

Where you place the script tag at the end of the HTML then you already know that everything in the DOM has already loaded before the script loads and so you do away with the need to test if the window has loaded or if specific DOM elements have loaded as you are loading the script last. What this means is that your processing must wait until every single component of the web page has loaded prior to anything within the script being able to run giving you the equivalent of waiting for the load event without needing to test that particular event directly.

You can be reasonably sure that the script will be the last thing that the browser loads because of the way that most web browsers work when it comes to downloading all the individual files that the web page requests in order to load the page. Each individual file whether CSS, image, JavaScript, or other object type have a download request sent to the server when the particular file reference is reached in the HTML. Some browsers such as Internet Explorer limit the number of files that can be downloaded from the same site simultaneously while other browsers don't impose such a limit. This means that if you have multiple files to download for your page that Internet Explorer will be downloading only two at the same time and a third file will have to wait for one of the first two to complete before it can start downloading. Other browsers may have three or even more files all downloading at the same time. This does not necessarily mean that the files download slower in IE than other browsers since the total bandwidth available to download the files is the same regardless of how many are being downloaded at the same time. Other browsers will download each individual file slower when more files are being downloaded at the same time.

Placing your JavaScript in the head of the page will therefore delay the download of all of the images and other content files belonging to your web page because the JavaScript download comes before the image downloads. This allows at least some of the JavaScript to be run sooner at the cost of slowing the download of the rest of the page. Placing the JavaScript at the bottom of the body of your page means that the images and other content files will load much faster but the JavaScript will then be the last thing loaded into the web page meaning that the whole page will have downloaded before any of the JavaScript can be run. There is no right and wrong between these two ways of adding the JavaScript to your page as the page will still take the same total time to download whichever way you choose. The difference between the two options relates to the order in which the parts of the page are downloaded and therefore may affect how fast your page appears to load, particularly if not all of the page is visible in the browser at once and some of the images are not visible without scrolling.

One book that I have states that all browsers apply an additional restriction when it comes to downloading JavaScript where JavaScript files will not be downloaded while any other files are being downloaded. If this is true then when a script tag is reached the browser will finish downloading all of the files currently being downloaded before starting the JavaScript download and will not start any other downloads until the JavaScript download finishes. If true this will result in even longer delays before the images etc load when the script is in the head of the page and even longer delays before the script runs if it is placed at the bottom of the body.