Async scripts for asm.js

Every medium or large game should compile asm.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process. In Gecko, async compilation allows the JavaScript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in Firefox 28). To see the difference, toggle javascript.options.parallel_parsing in about:config.

Putting async into action

Getting async compilation is easy: when writing your JavaScript, just use the async attribute like so:

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

or, to do the same thing via script:

js
const script = document.createElement("script");
script.src = "file.js";
document.body.appendChild(script);

(Scripts created from script default to async.) The default HTML shell Emscripten generates produces the latter.

When is async not async?

Two common situations in which a script is not async (as defined by the HTML spec) are:

html
<script async>
  code();
</script>

and

js
const script = document.createElement("script");
script.textContent = "code()";
document.body.appendChild(script);

Both are counted as 'inline' scripts and get compiled and then run immediately.

What if your code is in a JS string? Instead of using eval or innerHTML, both of which trigger synchronous compilation, you should use a Blob with an object URL:

js
const blob = new Blob([codeString]);
const script = document.createElement("script");
const url = URL.createObjectURL(blob);
script.onload = script.onerror = () => URL.revokeObjectURL(url);
script.src = url;
document.body.appendChild(script);

The setting of src rather than innerHTML is what makes this script async.