New year has just started and with it new resolutions to accomplish. How about learning how to use WebAssembly and get a performance boost? This article continues a serie of articles that we are writing about performance, go and check “ ” and “ ” ✌️ How to get a performance boost using Node.js native addons A 1300% performance gain with Ruby time parsing optimization! I want to demonstrate to you today how to create and use WebAssembly modules and later on consume them from the browser as if they were js modules. In order to do so I will take the Fibonacci algorithm, which I and I will benchmark its performance running as a normal javascript function and as a WebAssembly module. already discussed here Implementations We are going to cover the same 3 techniques we already covered in the previous article: Loop Recursion Memoization The following snippets cover those implementations in Javascript and C. Javascript C I will not explain how these functions work since this post is not about that. If you want to know more about it check . this or this A bit of history was born with the premise of creating a safe, portable and fast to load and execute format suitable for the web. WebAssembly is not a programing language, it is a which has both text and binary specs. This means that low level languages like C/C++, Rust, Swift, etc. can be compiled with a WebAssembly output. It shares the stack with javascript, that’s why it is different from things like . Also its is a community effort, with all browser vendors working on it. WebAssembly compilation target java-applets design is a LLVM-to-JavaScript Compiler. That means that languages like C/C++ or any language that speaks LLVM can be compiled to JavaScript. It provides a set of Apis to port your code to the web, the project has been running for years and was typically used to port games to the browser. Emscripten achieves its performance outputting but recently it has integrated successfully a WebAssembly compilation target. Emscripten asm.js is a low-level optimized subset of Javascript, linear memory access via TypedArrays and type annotations. Again, it is not a new programing language. Any browser without asm.js support will still work when running asm.js, it will just not get the performance benefits. ASM.js As of the current status is that it works in and under a feature flag and is under development in . And from the V8 side, it just 🚀. 10–01–2017, Chrome Canary Firefox Safari got enabled by default This video from the shares the current state of JavaScript and script tooling in V8, and discusses the future with WebAssembly. Chrome Dev Summit 2016 Building + Loading module Let’s take a look at how we transform our C program into . To do so, I decided to go with the which instead of returning a combination of .js and WebAssembly, will return just WebAssembly code without the system libraries included. wasm Standalone output This approach is based on Emscripten’s concept. A side module makes sense here, since it is a form of dynamic library, and does not link in system libraries automatically, it is a self-contained compilation output. side module $ emcc fibonacci.c -Os -s WASM=1 -s SIDE_MODULE=1 -o fibonacci.wasm Once we have the binary we just need to load it in the browser. To do so, exposes a top level object which contains the methods we need to and the module. Here is a simple method based on which works as generic loader: WebAssembly js api WebAssembly compile instantiate Alon Zakai gist Cool thing here is that everything happens asynchronously. First we fetch the file content and convert it into an which contains the raw binary data in a fixed length. You can’t manipulate it directly and that’s why we then pass it to which returns a which you can finally instantiate with . ArrayBuffer WebAssembly.compile WebAssembly.Module WebAssembly.Instance Take a look into the format that WebAssembly uses if you want to go deeper into that topic. Binary-encoding Benchmarking Now is time to see how we can use the module and test its performance against the javascript implementation. We will use 4 as input to be consistent with what we did in our previous article: 0 Results (You can check a live demo ) here JS loop x 8,605,838 ops/sec ±1.17% (55 runs sampled)JS recursive x 0.65 ops/sec ±1.09% (6 runs sampled)JS memoization x 407,714 ops/sec ±0.95% (59 runs sampled)Native loop x 11,166,298 ops/sec ±1.18% (54 runs sampled)Native recursive x 2.20 ops/sec ±1.58% (10 runs sampled)Native memoization x 30,886,062 ops/sec ±1.64% (56 runs sampled) Fastest: Native memoizationSlowest: JS recursive Interesting facts: Best C implementation is 375% faster than best JS implementation. Fastest implementation in C is memoization while in JS is loop. Second fastest implementation in C is still faster than the JS faster one. Slowest C implementation is 338% times faster than the JS slowest one. Conclusion Hope you guys have enjoyed this introduction to WebAssembly and what you can do with it today. In the next article I want to cover non standalone modules, different techniques to communicate from C <->JS and Link & Dynamic Linking. Don’t forget to check the and to stay up to date with the latest updates as well as the . WebAssembly Roadmap Emscriptend Changelog Getting Started tutorial Happy 2017 🐣 You can follow me on Twitter or Github @zzarcon

Fetch

Mozilla

Target

Twitter

YouTube

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

How to get a performance boost using WebAssembly

Too Long; Didn't Read

Companies Mentioned

@devlucky

RELATED STORIES