asm.js performance improvements in the latest version of Firefox make games fly!

The latest version of Firefox which launched last week includes a major update to the user interface as well as to features like Sync. Another area in which this release brings significant improvements is in asm.js performance, which as we will see below is very important for things like games. To put that aspect of Firefox’s performance in context, we’ll take a look at benchmark results comparing Firefox to other browsers, which show that Firefox is faster at executing asm.js code.

asm.js speedups

asm.js is a subset of JavaScript that is very easy to optimize and is particularly useful for porting code in C or C++ to the Web. We’ve blogged about how Firefox can optimize asm.js code using 32-bit floating point operations, which, together with all the other work on optimizing asm.js, allows it to run at around 1.5x slower than the speed of the same C/C++ when compiled natively. So, while not quite native speed yet, things are getting very close. At the time of that blog post those optimizations were only on nightly builds, but they are now reaching hundreds of millions of Firefox users in Firefox 29, which is now the release version of Firefox.

Another important set of asm.js optimizations concern startup speed. As blogged about by Luke a few months ago, Firefox performs ahead of time (AOT) compilation and can cache the results, for significant speedups in startup times. Those optimizations also shipped to users in Firefox 29.

Web browser comparisons

Now that all those optimizations have shipped, it’s interesting to look at up-to-date browser comparisons on asm.js code. The above graph shows the Emscripten benchmark suite running the latest stable versions of Google Chrome, Internet Explorer and Firefox on Windows 8.1. Lower numbers are better in all the results here, which are real-world codebases compiled to asm.js (see notes in the graph).

Unity, Emscripten and asm.js

asm.js is a subset of JavaScript, so it is just one of many styles of JavaScript out there. But it represents an important use case. As we announced at GDC, Unity, one of the most popular game creation tools on the market, will support the Web by using Emscripten to compile their engine to asm.js.

But videos are no substitute for the real thing! You can try the games shown there in your browser right now, with Unity’s recently released Dead Trigger 2 and Angry Bots demos. If you run those in the latest version of Firefox, you’ll see many of the asm.js optimizations mentioned earlier in action. For example, if you visit one of those links more than once then asm.js caching will allow it to avoid recompiling the game (so it starts up faster), and also gameplay will be smoother due to faster asm.js execution.

Being able to execute asm.js-style code efficiently makes it possible for games like this to run well on the Web, without proprietary, nonstandard plugins. That’s why it’s exciting to see more asm.js optimizations reach Firefox users in Firefox 29. And while benchmark results can sometimes seem like nothing more than abstract numbers, speedups on asm.js benchmarks directly improve things like games, where performance is extremely important and very noticeable.

(Thanks to Marc Schifer for helping with the benchmark measurements.)

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


15 comments

  1. JulienW

    In Angry Bots, my french keyboard azqw keys don’t work properly to move the character. Also, it sounds like left/right sound channel are swapped (Firefox 30, Linux). Is it something worked upon?

    May 5th, 2014 at 07:36

    1. Anthony Hughes

      Julien, I’ve tried reproducing both your keyboard issue and audio issue but have been unsuccessful. I’ll need more information from you to take this any further. You can get in touch with me through my Mozillians profile, ashughes on mozillians.org.

      May 5th, 2014 at 16:05

      1. shavounet

        Oh I guess it is the common AZERTY keyboard issue (imagine playing with Q swapped with A and Z with W). There should be a way to map keys… :-)

        May 6th, 2014 at 08:44

        1. Aki

          It’s even worse if you’re not using a *WERTY keyboard layout!

          It’s kind of funny that the limiting factor on in-browser gaming is no longer 3D acceleration, but customizable keyboard controls. :-)

          May 12th, 2014 at 17:30

  2. Wernfried Rheinmaier

    “To put that aspect of Firefox’s performance in context, we’ll take a look at benchmark results comparing Firefox to other browsers, which show that Firefox is faster at executing asm.js code.”
    So the only implementation of asm.js is the fastest one? I guess that’s amazing, right?
    “1.5x slower” – those expressions always confuse me, and I get them wrong.
    250% or 150% of the native binary’s execution time? Sounds like 250% to me, but I hope it’s not that slow?

    Thanks for the otherwise great update!

    May 5th, 2014 at 09:16

    1. Alon Zakai

      Well, it might not be surprising that targeted asm.js optimizations including type checking can do better than more general optimizations. But it isn’t necessarily true, and so worth measuring I think.

      1.5x slower in the context of how long it takes code to execute (measured in ms in that chart) means literally it ran 1.5x longer. So if one browser took 100ms, and the other took 150ms, the second took 1.5x longer than the first, and so is 1.5x slower. I agree that this can be confusing, perhaps we should report numbers as % of native speed instead (although that also has potential confusion as well)?

      May 5th, 2014 at 10:11

      1. njn

        No no no! Avoid percentages in performance comparisons, please. Speed-up/slow-down factors are much easier to understand.

        May 6th, 2014 at 03:08

      2. Wernfried Rheinmaier

        Thanks for your response!
        My problem with “1.5x longer” is probably a english to german translation error of mine:
        When A is 1 foot long, and B is 1 foot longer than A, then B is 2 foot (1 foot to be as long as A plus 1 foot longer). I am quite sure about that.
        When B is 1.5 times longer than A, then B has a length of 1 foot (to be as long as A) plus 1.5 times the lenght of B which is 1.5 foot (the ammount it is longer) which gives a total of 2.5 foot.
        For a length of B resulting in 1.5 foot length I was taught to say B is 1.5 times as long as A.
        But the teacher also said that fusion is when things go apart, even though there is a german word Fusion, which means fusion.
        Anyway, not requesting percentages, and I would have had that same problem with “150% longer”. I had googled before my initial comment and found out what I knew already: both interpretations are used, but not wheter there is on single correct one or wheter both are valid. And I figured that both of them being invalid is not an option ;)
        Thanks!

        May 6th, 2014 at 17:38

  3. Ryan

    I can’t believe I was able to click a link and within seconds start playing a decent looking 3d game in my browser. So much faster than downloading games from Steam or playing on my XBox. Awesome work!

    May 12th, 2014 at 16:29

  4. Dereck L.

    asm.js is the dumbest shit I’ve ever seen. Anything you’d want to use it for, backwards compatibility becomes irrelevant in the face of woefully inadequate performance. You may just as well use PNaCl.

    May 12th, 2014 at 18:08

    1. Mike

      That’s actually explained in the FAQ of asm.js project. It’s not the way to go in the future, but it’s something that works now in every modern browser. Solutions like PNaCl might be faster, but they are not running anywhere except Chromium. We have to wait for a new Internet application platform to emerge to fulfill all needs of the modern web applications.

      May 12th, 2014 at 23:50

  5. gaby de wilde

    The thing is self seems totally cool but the documentation leaves much to be desired.

    I’m not exited.

    May 12th, 2014 at 20:37

  6. Mike

    Hi,

    I’m wondering what is the performance of 3D physics engine running using asm.js. Is it good enough to be used in games such as Unreal ?

    May 12th, 2014 at 23:46

    1. Alon Zakai

      Yes, the Unreal and Unity engines use 3D physics, it works fast enough. Here’s a demo of physics specifically: http://kripken.github.io/ammo.js/examples/new/ammo.html

      May 13th, 2014 at 10:09

  7. Brian

    Angry Bots fails in my browser with an out of memory error in the console. No error message is displayed in the browser.

    My computer has 16GB of RAM and FF is using less than 1.8GB.

    Not sure how much RAM Angry Bots needs, but this seems fixable by making FF a 64-bit executable.

    May 13th, 2014 at 08:02

Comments are closed for this article.