Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 508951 of Async scripts for asm.js

  • Revision slug: Games/Techniques/Async_scripts
  • Revision title: Async scripts for asm.js
  • Revision id: 508951
  • Created:
  • Creator: [email protected]
  • Is current revision? No
  • Comment

Revision Content

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).

Putting async into action

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

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

or, to do the same thing via script:

var 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:

<script async>code</script>

and

var script = document.createElement('script');
script.innerHTML = "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 can use a Blob with an object URL:

var blob = new Blob([codeString]);
var script = document.createElement('script');
script.src = URL.createObjectURL(blob);
document.body.appendChild(script);

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

Revision Source

<div class="summary">
 <p>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).</p>
</div>
<h2 id="Putting_async_into_action">Putting async into action</h2>
<p>Getting async compilation is easy: when writing your JavaScript, just use the <code>async</code> attribute like so:</p>
<pre class="brush: js">
&lt;script async src="file.js"&gt;&lt;/script&gt;</pre>
<p>or, to do the same thing via script:</p>
<pre class="brush: js">
var script = document.createElement('script');
script.src = "file.js";
document.body.appendChild(script);</pre>
<p>(Scripts created from script default to <code>async</code>.)&nbsp; The default HTML shell Emscripten generates produces the latter.</p>
<h2 id="When_is_async_not_async.3F">When is async not async?</h2>
<p>Two common situations in which a script is *not* async (as <a href="https://www.w3.org/TR/html5/scripting-1.html">defined by the HTML spec</a>) are:</p>
<pre class="brush: js">
&lt;script async&gt;code&lt;/script&gt;</pre>
<p>and</p>
<pre class="brush: js">
var script = document.createElement('script');
script.innerHTML = "code";
document.body.appendChild(script);</pre>
<p>Both are counted as 'inline' scripts and get compiled and then run immediately.</p>
<p>What if your code is in a JS string?&nbsp; Instead of using <code>eval</code> or <code>innerHTML</code>, both of which trigger synchronous compilation, you should can use a Blob with an object URL:</p>
<pre class="brush: js">
var blob = new Blob([codeString]);
var script = document.createElement('script');
script.src = URL.createObjectURL(blob);
document.body.appendChild(script);</pre>
<p>The setting of <code>src</code> rather than <code>innerHTML</code> is what makes this script async.</p>
Revert to this revision