Asynchronous JavaScript: Running after loading

The code of scripts for the statistics service Analytics of Google is asynchronous. It does not slow the pages, because it is executed once the display is completed. This without having recourse to Ajax, with just asynchronous JavaScript code that works on all browsers ... But how does that works?

HTML 5 has defined an async attribute that makes the execution of scripts is disconnected from the display of the page.

<script async>
 ... 
</script>

It is taken into account by Firefox 3.6 and by Webkit and then Chrome and Safari.
Analytics uses therefore a different way for compatibility with all browsers.

Asynchronous JavaScript for any browser

We describe how it works throught a demo...

The client side code, in the web page

The HTML code is just a layer where the data will be stored.

 <div id="storage"></div>

The JavaScript code is made of two parts...

<script type="text/javascript">

var demo = demo || [];
demo.push(['myfunc'], ['12345']);
demo.push(['func2'], ['hello']);

(function() 
{
    var myscript = document.createElement('script');
    myscript.src = 'async.js';
    myscript.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(myscript);
})();
</script>

The first part is an array that contains the commands and parameters. This table is an object in your own page that contains the settings for your own account.

The second part is a script that generates another script, which loads the remote script (on your site or another site, on the Google site for Analytics ).
The script is generated and added dynamically to the page content and then executed after the display thereof.

The async.js URL is for the demo. It may be replaced by any URL of a script on the same site, or another site.

The remote code, on the website or another site

The Google code is not public. So I had to imagine my own code that executes the commands placed in the table and they display values that are placed here too...

var storage = document.getElementById("storage");
storage.innerHTML = "The remote script...<br><br>";

demo.myfunc = function(x)
{
  storage.innerHTML += "Account : " + x  +	"<br>";	
}
demo.func2 = function(y)
{
  storage.innerHTML += "Message : " + y + "<br>";
}
storage.innerHTML += demo.length + " items in demo array<br>";
demo.myfunc(demo[1]);
demo.func2(demo[3]);

The script on the server (on the Google site for Analytics), associate methods to the demo object to create the required actions on your account.

This code is in the file async.js while the page code is the source of the demonstration ...

Demonstration

Download the demo

The demonstration displays at the footer data passed by the client side script to the remote script, in this case a pseudo-account number and the message "hello".

For demonstration purposes, the remote script is on the same site.

See for Analytics the tutorial on the Google's site: Asynchronous Tracking Usage Guide.