Asynchronous Script Loading

Bernard Lange
@gustaff_weldon

Asynchronous script loading

<script src="jquery.js"></script>
<script src="jquery-plugin-1.js"></script>
....
<script src="jquery-plugin-n.js"></script>
<script src="my-script.js"></script>

Supersize Web

the average top ten U.S. web site contains ~250K of JavaScript. But executes 25% of it before the onload event. Souders, 2008

Page scripts

Why

Asynchronous Script loading

Challenges

How

document.write

Script in an iframe

<iframe src='A.html'></iframe>
// access iframe from main page
window.frames[0].someMethodInScript();
// access main page from iframe
parent.document.createElement('div');

iframe

slowest and most expensive DOM element to create

xhr eval

eval(xhrObj.responseText);

xhr inject

document.head.appendChild(script);
script.text = xhrObj.responseText;

script defer

<script defer src="script.js"></script>

execute after the document has been parsed

DOM script

var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);

script async

<script async src="script.js"></script>

execute asynchronously when script is available

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (i.e., scripts that don't have the src attribute). In older browsers that don't support the async attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the async DOM property defaults to true for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the document.createElement("script").async evaluates to true (such as Firefox 4.0), set .async=false on the scripts you want to maintain order. Never call document.write() from an async script. In Gecko 1.9.2, calling document.write() has an unpredictable effect. In Gecko 2.0, calling document.write() from an async script has no effect (other than printing a warning to the error console).

<script>
<img>

<script src="slow.js"></script>
...
<img src="HTML5_Logo.png"/>

<script async>
<img>

<script async src="slow.js"></script>
...
<img src="HTML5_Logo.png"/>

script vs defer vs async

Execution order

Dilbert.com

preloading

type hack

var s = doc.createElement('script');
s.type = 'text/cache';
s.src = url;
image/object hack

if (isIE) {
    new Image().src = scriptUrl;
}
o = document.createElement('object');
o.data = scriptUrl;

we can do better

async=false

to make script-inserted external scripts execute in their insertion order

var script = document.createElement("script");
script.async = false;
script.src = url;
document.head.appendChild(script);

script.async=true;

var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);

script.async = false;

var script = document.createElement("script");
script.async = false;
script.src = url;
document.head.appendChild(script);

Not so easy

No single technique warranties order execution in all browsers

Use loaders

LabJS

<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script>
framework.init();
myplugin.doSomething();
</script>
$LAB.script("framework.js")
    .wait()
    .script("plugin.framework.js")
    .script("myplugin.framework.js")
    .wait(function(){
        framework.init();
        myplugin.doSomething();
    });

Last (but not least) argument

AMD (Asynchronous Module Definition)

format to provide a solution for modular JavaScript that developers can use today

define

define('myModule', ['math', 'graph'],
    function ( math, graph ) {
        var pub = {
            plot: function(x, y){
                var coords = math.randomGrid(x,y);
                return graph.drawPie(coords);
            }
        };
        return pub;
    };
});

require

require(['foo', 'bar'], function ( foo, bar ) {
        // rest of your code here
        foo.doSomething();
});
//Dojo 1.7 (AMD)
require(["dojo/ready","dojo/fx"], function(ready,fx) {
    ready(function(){
        require(["dijit/form/Button","dojo/_base/window"], function(btn,win) {
            ready(function(){
                new dijit.form.Button({}).placeAt(win.body());
            });
        });
    });
});

Dojo 1.7, Mootols 2.0, jQuery 1.7 - AMD compliant

Questions?

Thank you!

@gustaff_weldon