When Should You Attach JavaScript at the Bottom of the Page?

The document.write() statement has a lot to answer for when it comes to how JavaScript interacts with the HTML in the web page. Because a script might contain document.write statements the browser stops rendering the page when it reaches a script tag and waits for the script to load before continuing - just in case the script contains document.write statements that add more HTML at the current spot in the page.

You only need to try to load a web page that contains Google ads while not connected to the internet to see this effect in action. The page will load as far as where the script to load the first Google ad is in the source and will stop rendering at that point at least until it decides to timeout loading that script.

The situation is somewhat better than it used to be. Browsers used to download any JavaScript files by themselves and made everything wait until the script downloaded. Now the scripts will download alongside everything else and it is only the rendering of the HTML that gets delayed waiting for the script. There are even two new attributes that can be used in the script tag ("async" and "defer") either of which will tell the browser that the script does NOT contain document.write statements and so there is no need to delay rendering the HTML because the script doesn't contain document.write statements to affect the page. Not all browsers support these new attributes yet and even if they did that still doesn't resolve the issue with antiquated scripts that still continue to use document.write statements (such as Google). Where the script does contain dicument.write statements you have no alternative but to place them in the spot where the code is to be inserted (Google even have their script written in such a way that even if you do change the script attached to your page so that it will add their code into the right spot in the page from a script running after the page has loaded the script that it in turn calls will still revert back to inserting the ad following the script that started the call process - placing the ad in the wrong place.

This gives you one reason why scripts that don't contain document.write statements might be better placed at the bottom of the page so that they don't interfere with the rendering of the HTML.

The replacement for document.write is the huge range of Document Object Model commands that allow JavaScript to interact completely with the HTML in the web page. All of these commands share one thing - they all need the HTML that they interact with to have been rendered prior to being able to interact with that HTML.

This means that if your JavaScript contains any DOM statements at all (and that includes innerHTML calls) then the script needs to run after the HTML in the page that it interacts with has loaded. Now you could put the script in the head of the page and run the code after the page finishes loading the HTML but that involves additional JavaScript to test for when the page has loaded. If you place the script at the bottom of the page you know the HTML has loaded without even having to test for it.

So what about where the page still has JavaScript jumbled into the HTML because you haven't yet had time to rewrite the page to separate out the JavaScript properly? Here too there are reasons for placing the script at the bottom. You will eventually rewrite the page to separate out the JavaScript to make both the HTML and JavaScript easier to maintain and the JavaScript easier to use on other pages and once you do that the same reasoning for placing the script at the bottom as already mentioned will apply - so you may as well place it there now.

Now placing the script at the bottom may give you a situation where for a second or two the JavaScript embedded in the HTML is in place but the script it references hasn't loaded yet. If you had put the script at the top it will take those couple of seconds longer before the HTML displays at all and so your visitors cannot interact with the embedded JavaScript before the script it calls is available because the entire page is waiting for the script to load first before displaying the HTML with the embedded JavaScript. If this is a long delay then your visitors will leave before the page even loads if the script is attached to the head. If it is a short delay then the script will load quickly enough when attached to the bottom of the page that your visitors are unlikely to try to interact with it before the script loads.

Anyway, the worst that can happen when the script is attached to the bottom of the page and your visitors attempt to interact with the embedded JavaScript before the script it calls has loaded is that the call to the yet to be loaded function crashes. This leaves your visitor in the same position as they would be in if their browser didn't support JavaScript and so whatever processing you have in place for the approximately one in twenty of your visitors without JavaScript will also cater for those of your visitors who attempt to interact with the page before it finishes loading.

Any JavaScript that interacts with the HTML in the body of the page can be moved to the bottom of the body without changing how the script works and with the HTML rendering faster in at least some browsers. With the script at the bottom of the body you can also do away with any tests for whether the page has finished loading in most instances since most of the time what you care about is whether the HTML has finished loading and with the script as the last thing in the body you know the HTML is loaded without having to test for it.

So perhaps a better question should be "when wouldn't you be better off moving the script to the bottom of the page?" since the bottom of the page is the best place to put most scripts.

There are exactly two types of scripts that should not be moved to the bottom of the page. The first of these is scripts that contain document.write statements. These need to be placed at the spot in the body of the page where you want the HTML that the script produces to be written. Since you shouldn't be writing scripts using document.write any more the only such scripts will be those provided by your advertising service where the advertiser has yet to update their JavaScript into the 21st Century.

The second type of script that should not go at the bottom of the page are those that do not interact with the body of the web page at all. There are two sub-categories for this type of script - those where the code in the script is making a decision as to whether to render the page at all and those that gather information about the browser to send to the server. The scripts in the first of these two sub-categories must go in the head of the page so that they can decide whether to render the page or not before it starts rendering. The scripts in the second sub-category can run at any point in the page and will produce the same result and so placing them in the head will send the information to the server slightly sooner while slightly delaying the loading of the page (you'd specify "async" or "delay" on such a script so as to not hold up rendering the HTML in those browsers that support those attributes).

The most interesting thing to notice with respect to this last category of script is that where such scripts are provided by a third party (eg. Google Analytics) the script owners generally recommend attaching the script at the bottom of the web page. The only reason for such placement with this type of script is how the script effects the rendering speed of the HTML.

So taking all these into account the only time the bottom of the page is not the best place to put your script is where it contains document.write or where it needs to be able to stop the page rendering at all.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate