Javascript Execution Order

Perm url with updates: http://xahlee.org/js/js_executing_order.html

Javascript Execution Order; HTML5 Asynchronous Javascript

Xah Lee, 2010-10-30

This page explains the execution order of javascript in a html page, and answers some common questions.

When a javascript appears in a html page (either as a file or embeded code), the browser will load (and run) them in the order they appear on the html page.

This means:

  • If your javascript is slow, the browser will wait for it to run, before rendering the html that comes after the script.
  • if your javascript manipulate the page's html elements that's below the script, it'll fail because those element are not loaded yet.

So, the best solution is to always place your javascript at the bottom of the page, right before the 「</body>」 tag.

If for some reason you must have your script at the top of a html page, and your script need to see the whole page before it runs, then, one trick to make sure your script runs only after the page has been loaded, is to use the “onload” method. Like this:

// function defintions here
// function someFunction1 () {...}
// function someFunction2 () {...}
// function someFunction3 () {...}
// ...

window.onload = functionName;

This will call the function named “functionName” after the window has been loaded.

If you have multiple functions to call, you can do it like this:

window.onload = function () { 
 functionName1(); 
 functionName2(); 
 functionName3(); 
};

or like this:

// function definitions ...
// ...

function main () {
 functionName1(); 
 functionName2(); 
 functionName3(); 
}

window.onload = main;

Here's a test page: onload.html. (view source to see code)

See also: Functional Programing in Javascript.

HTML5 “async” Feature

In HTML5, there's a “async” feature. You use it like this:

<script type="text/javascript" async src="myscript.js"></script>

The “async” should not be used with “=true” or “=false”. The presence of “async” attribute is enough. When the attribute is present, it tell the browser not to wait for the script to load. The browser will continue to load the html page and render it while the browser load the script.

There's also a “defer” attribute. When “defer” is present (and when “async” is not there), then browser will make sure that the script runs only after the html page is loaded.

Here's the official spec from whatwg.org. Quote:

The async and defer attributes are boolean attributes that indicate how the script should be executed. The defer and async attributes must not be specified if the src attribute is not present.

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

As of 2010-10, it seems only Firefox 3.6 supports “async”. You can work around by using javascript to construct a “<script>...</script>” object then insert it. See: Asynchronous Javascript; Using Javascript to Insert Javascript.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs