Mozilla Hacks

A cartoon intro to WebAssembly

By Lin Clark

Posted on February 28, 2017 in A cartoon intro to WebAssembly, Featured Article, and Performance

WebAssembly is fast. You’ve probably heard this. But what is it that makes WebAssembly fast?

In this series, I want to explain to you why WebAssembly is fast.

Wait, so what is WebAssembly?

WebAssembly is a way of taking code written in programming languages other than JavaScript and running that code in the browser. So when people say that WebAssembly is fast, what they are comparing it to is JavaScript.

Now, I don’t want to imply that it’s an either/or situation — that you’re either using WebAssembly or using JavaScript. In fact, we expect that developers will use both WebAssembly and JavaScript in the same application.

But it is useful to compare the two, so you can understand the potential impact that WebAssembly will have.

A little performance history

JavaScript was created in 1995. It wasn’t designed to be fast, and for the first decade, it wasn’t fast.

Then the browsers started getting more competitive.

In 2008, a period that people call the performance wars began. Multiple browsers added just-in-time compilers, also called JITs. As JavaScript was running, the JIT could see patterns and make the code run faster based on those patterns.

The introduction of these JITs led to an inflection point in the performance of JavaScript. Execution of JS was 10x faster.

A graph showing JS execution performance increasing sharply in 2008

With this improved performance, JavaScript started being used for things no one ever expected it to be used for, like server-side programming with Node.js. The performance improvement made it feasible to use JavaScript on a whole new class of problems.

We may be at another one of those inflection points now, with WebAssembly.

A graph showing another performance spike in 2017 with a question mark next to it

So, let’s dive into the details to understand what makes WebAssembly fast.

Background:

WebAssembly, the present:

WebAssembly, the future:

About Lin Clark

Lin works in Advanced Development at Mozilla, with a focus on Rust and WebAssembly.

More articles by Lin Clark…

22 comments

  1. Andrew Wooldridge

    Great article! More graphics!

    February 28th, 2017 at 20:43

  2. Martin

    This seems to be the first article in a series, but I don’t see a next button or link. How to I get to part 2?

    March 2nd, 2017 at 02:29

    1. Lin Clark

      There are 5 links at the bottom of the article.

      March 2nd, 2017 at 07:07

  3. newton

    todos nossos internautas deveriam ter um pouco de conhecimento sobre contéudos de seu navegador ,pra poder usufruir melhor tudo de bom que ele oferece ,hoje com muito mais vivencia na internet ,faço melhor o uso do nosso super Mozilla

    March 2nd, 2017 at 08:56

  4. Michaela

    Looks good, Lin, but too may links for me.
    How about a view-as-single-page option?

    March 2nd, 2017 at 10:19

    1. Lin Clark

      Our CMS doesn’t have that kind of flexibility, but we are planning to put this out as a mini e-book.

      March 2nd, 2017 at 10:41

  5. erdees

    Awsome article! : )

    March 2nd, 2017 at 11:00

  6. FRANK CARDENAS

    I like it.

    March 2nd, 2017 at 17:06

  7. ducnguyen.info

    Great article

    March 2nd, 2017 at 17:13

  8. Abdul Rahman Bin Bujang

    The first time I stay in touch with the same situation as well there’s anything else that i can update and download+ delete

    March 3rd, 2017 at 00:21

  9. Estelle Bonilla

    Looking forward to more info. Need more info. on the new web browsseer as to how it will help.

    March 3rd, 2017 at 10:03

  10. songwon

    wow.. this article is very simple and easy.

    March 3rd, 2017 at 20:46

  11. 0918nobita

    I’m Japanese. Do you mind if I post a translation of this article on Qiita(tech blog)?

    March 4th, 2017 at 01:47

    1. Lin Clark

      Sure! Just make sure to provide attribution and link back to these originals. Let us know when you’ve translated it and we’ll have a native Japanese speaker in our community review it. Once that’s done, we’ll add links to your translations.

      March 4th, 2017 at 06:56

      1. 0918nobita

        Sorry for the wait. I posted the translation which no one can browse except someone who knows its URL on Qiita. We kindly ask for your confirmation. → http://qiita.com/0918nobita/private/c69bc926431c6b32cc37

        March 5th, 2017 at 03:09

        1. Lin Clark

          Great, I’ll send it off to review.

          March 5th, 2017 at 08:15

  12. Eric Ding

    Hi , Lin :

    Thanks you such an interesting introduction :)
    I am thinking of migration of a window application ( .exe ) to a WebAssembly add-on and I have 2 questions on WebAssembly :
    1. support of google’webrtc. My app. ( similiar to Peer5 : https://www.peer5.com/faq or http://bloggeek.me/peer5-webrtc-interview/ ) utilizes webrtc’s data channel to share files btwn. users.
    Is it possible to translate the data channel in c++ into WebAssembly ? Has it been fully tested ?

    2. protection of software. The nature of WebAssembly is just javascript , which means everything is open.
    Since WebAssembly is taking more and more role of app. , does the industry/ W3C Working Group/or any of the 4 browsers companies think of
    software protection ? My app. is free to copy , but I introduce a decent tool : VMProtect to protect it from understanding/debug.
    Can I still do so if I translate my app. into webassembly ? Why do the companies not open-source the source codes of the browsers if they insist open-source ?

    Regards !

    Eric Ding

    March 7th, 2017 at 21:17

  13. Clem

    Thanks a lot

    March 20th, 2017 at 04:46

  14. David

    Great article, very helpful.

    I’m currently experimenting with WASM. Unfortunately my C++ source code (which I currently ship as a Windows dll) has legal restrictions which prevent me from sharing the source outside of my team. If I ship it as .wasm on the web will others be able to ‘uncompile’ it to reveal the original source code?

    March 21st, 2017 at 11:02

    1. Lin Clark

      There is some talk of adding a kind of source maps-like support for WebAssembly. This would be something that you could optionally deliver with the .wasm file to allow people to step through and debug source. However, even once that happens you would be able to control whether or not you deliver the source mapping information with your .wasm file.

      March 22nd, 2017 at 10:55

      1. David

        So if I don’t deliver the source mapping then the IP of the original source code is just as protected inside .wasm as if I were delivering a .dll

        That sounds ideal. Many thanks.

        March 22nd, 2017 at 11:49

  15. Mohammad Elbanna

    Hello,

    Thank you Lin for all your efforts.
    Unfortunately, I cannot see all the images (all of them give 404).
    Is there any hope to fix this?

    March 25th, 2017 at 14:19

Comments are closed for this article.