Here’s How to Create Scorchingly Fast JavaScript

The race continues to produce the fastest JavaScript engines in browsers. With the recent release of Firefox 22, Mozilla’s jumped past Chrome. Its not-so-secret sauce is called asm.js, and is a subset of full JavaScript.

When correctly optimized, JavaScript code can run at about half the speed of native machine code. Don’t believe me? Then run up Firefox and make sure it’s the latest version (22). If you haven’t got Firefox installed, go to GetFirefox.com. You don’t want to miss this demo.

Now browse to the Unreal Engine HTML5 website. It’s running their Epic Citadel demo, so you can walk through a citadel with gorgeous views, birds flying, reflections coming off inside floors and flags flapping outside. And just take a look at the flowing water. It’ll take a while to load — it’s packing 50 MB of data — but it’s well worth the wait.

Benchmarking

Would you believe that what you’re seeing is just JavaScript with a little help from WebGL? If you’ve got a decent CPU and video card, the benchmark will return a pretty good frame rate. My two year old i7 950 CPU with a GTX 480 card returns around 56 fps at 1920 x 1024.

Benchmark Results: 54.5 fps

There are no tricks to this, no plugins. It’s just using a very optimized subset of JavaScript. But it didn’t start that way. The whole application was originally written in C++ and used the Unreal Engine SDK. That’s something like a million lines of C++. Then they ran the C++ compiler output through an open source tool called Emscripten and converted it into asm.js.

I see this as a threat to Chrome with its Native Client plugin. That’s a way to compile C/C++ and other languages to run safely in Chrome and execute native code within the Chrome Browser. But so far no other browser maker has bought into it.

With asm.js, it’s just JavaScript, so it works well on other browsers. Mozilla’s chosen to optimize its JavaScript engine to run this faster, including one integer optimization to multiply 32-bit integers. This technique of developing in one language and outputting in another isn’t new. Google did this first with GWT, which converted Java into JavaScript.

So why is asm.js so fast?

The Secret of asm.js

asm.js combines several techniques to increase JavaScript’s speed. For example, memory is treated as a typed array. This provides access to raw binary data as bytes rather than converting it from other types (typically char), which is slower. Even Internet Explorer supports typed arrays.

Also, to be valid asm.js the JavaScript functions must be statically validated. This allows it to be compiled without runtime checks, no boxing of integers and floating point numbers, and no garbage collection. Normal JavaScript often has its performance impaired because of these. Boxing in particular is where a primitive number, string or boolean is converted into a temporary object. The process allocates memory to hold it. Since this impairs performance, no boxing is good.

Other techniques include handling integers internally as integers, whereas normal JavaScript numbers are just numbers with or without a decimal point. There’s no explicit integer, but in asm.js integer operations can be performed using JavaScript arithmetic, relational and bitwise operators to be like C++ integers. Switch statements are compiled as a jump table.

Altogether, these and other techniques yield execution performance up to half the speed of native code, and do it running safely in your browser. It’s not hard to consider that maybe this is the Holy Grail of developing fast Web applications. But, oh the irony! Just recompile old C/C++ source code! Some games libraries have already been converted.

box2d

You can see the Box2D.js demo here.

Comments

  1. BY RobS says:

    Pretty amazing how far we’ve come. Not sure why it doesn’t load in Chrome. Also, until we get support in the other browsers, it’s yet another incompatibility between browser versions…should be interesting to see how it plays out.
    Oh, and why did they do the controls backwards? Mouse drag right should pull the view from the left but it pulls the view from the right…oh well…semantics. And I wonder how it gets when they add interaction to the game…all I saw was scenery and a few leaves falling.

  2. BY Richard Morgan says:

    This technique of converting information to native mode for the operating environment has been around since the 1960s.

    The Univac 1108 FORTRAN compiler produced native machine code that ran almost as fast as an application written in Assembly language. And unless the Assembly code was written carefully with regard to speed, the FORTRAN compiled code would actually out perform it! Most compiled code back then on other machines was 2 to 3 times slower than Assembly code.

    It’s good to know that some people still optimize code.

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>