How to get a performance boost using WebAssembly

devlucky
devlucky
Jan 12, 2017 · 5 min read
Image for post
Image for post

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 “How to get a performance boost using Node.js native addons” and “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 already discussed here and I will benchmark its performance running as a normal javascript function and as a WebAssembly module.

Implementations

We are going to cover the same 3 techniques we already covered in the previous article:

  • Loop

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

  • WebAssembly 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 compilation target 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 java-applets. Also its design is a community effort, with all browser vendors working on it.

As of 10–01–2017, the current status is that it works in Chrome Canary and Firefox under a feature flag and is under development in Safari. And from the V8 side, it just got enabled by default 🚀.

This video from the Chrome Dev Summit 2016 shares the current state of JavaScript and script tooling in V8, and discusses the future with WebAssembly.

Building + Loading module

Let’s take a look at how we transform our C program into wasm. To do so, I decided to go with the Standalone output which instead of returning a combination of .js and WebAssembly, will return just WebAssembly code without the system libraries included.

This approach is based on Emscripten’s side module 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.

$ 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, WebAssembly js api exposes a top level object WebAssembly which contains the methods we need to compile and instantiate the module. Here is a simple method based on Alon Zakai gist which works as generic loader:

Cool thing here is that everything happens asynchronously. First we fetch the file content and convert it into an ArrayBuffer 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 WebAssembly.compile which returns a WebAssembly.Module which you can finally instantiate with WebAssembly.Instance.

Take a look into the Binary-encoding format that WebAssembly uses if you want to go deeper into that topic.

Benchmarking

Now is time to see how we can use the module and test its performance against the javascript implementation. We will use 40 as input to be consistent with what we did in our previous article:

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 memoization
Slowest: JS recursive

Interesting facts:

  • Best C implementation is 375% faster than best JS implementation.

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 WebAssembly Roadmap and Emscriptend Changelog to stay up to date with the latest updates as well as the Getting Started tutorial.

Happy 2017 🐣

Image for post
Image for post
You can follow me on Twitter or Github @zzarcon
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

Image for post
Image for post

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

devlucky

Written by

devlucky

A bunch of colleagues writing about #swift #javascript #ruby #algorithms #performance and coding stories

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

devlucky

Written by

devlucky

A bunch of colleagues writing about #swift #javascript #ruby #algorithms #performance and coding stories

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app