thumbnail1.jpg
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.