• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Game development
  1. MDN
  2. Game development
  3. Techniques for game development
  4. Async scripts for asm.js

Async scripts for asm.js

In This Article
  1. Putting async into action
  2. When is async not async?

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:

<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 use a Blob with an object URL:

var blob = new Blob([codeString]);
var script = document.createElement('script');
var url = URL.createObjectURL(blob);
script.onload = script.onerror = function() { URL.revokeObjectURL(url); };
script.src = url;
document.body.appendChild(script);

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

Document Tags and Contributors

Tags: 
  • asm.js
  • async
  • Games
  • JavaScript
 Contributors to this page: chrisdavidmills, newtriks, fscholz, luke@mozilla.com
 Last updated by: chrisdavidmills, Jan 14, 2016, 3:49:49 AM
  1. Introduction
    1. Introduction to game development for the Web
    2. Anatomy of a video game
    3. Examples
  2. APIs for game development
    1. Canvas
    2. CSS
    3. Full Screen
    4. Gamepad
    5. IndexedDB
    6. JavaScript
    7. Pointer Lock
    8. SVG
    9. Typed Arrays
    10. Web Audio
    11. WebGL
    12. WebRTC
    13. Web Sockets
    14. WebVR
    15. Web Workers
    16. XmlHttpRequest
  3. Techniques
    1. Using async scripts for asm.js
    2. Optimizing startup performance
    3. Using WebRTC peer-to-peer data channels
    4. Efficient animation for web games
    5. 3D games on the Web
      1. 3D games on the Web overview
      2. Explaining basic 3D theory
      3. Building up a basic demo with Three.js
      4. Building up a basic demo with PlayCanvas
      5. Building up a basic demo with Whitestorm.js
      6. WebVR

    6. Audio for Web Games
    7. 2D collision detection
    8. 3D collision detection
      1. 3D collision detection overview
      2. Bounding volume collision detection with THREE.js
    9. Tiles and tilemaps
      1. Tiles and tilemaps overview
      2. Static maps
      3. Scrolling maps
    10. Implementing game control mechanisms
      1. Game control mechanisms overview
      2. Mobile touch controls
      3. Desktop mouse and keyboard controls
      4. Desktop gamepad controls
      5. Unconventional controls
  4. Tutorials
    1. 2D breakout game using pure JavaScript
    2. 2D breakout game using Phaser
    3. 2D maze game with device orientation
  5. Publishing games
    1. Publishing games overview
    2. Game distribution
    3. Game promotion
    4. Game monetization