1. What exactly is WebAssembly (WASM)

Who exactly is WebAssembly? The official definition is as follows:

Translated into Chinese, WebAssembly (WASM) is a new format that is portable, small, fast to load, and web-compatible.

In fact, WebAssembly is a new bytecode format designed to be a compilation target for high-level languages, and currently wASM modules can be created using C, C++, Rust, Go, Java, C#, and more to come (see figure below). This module is sent to the browser in binary format and executed on a proprietary virtual machine, sharing resources such as memory and threads with the JavaScript virtual machine.

The WASM module is always used with JavaScript “glue” code to perform useful actions when necessary. WebAssembly can be seen as an enhancement of JavaScript to make up for its lack of efficiency.

2. Why WebAssembly

There have been no static variable types since Brendan Eich created the JavaScript language. Because JavaScript’s dynamic variables can be Array one second and Object the next, the engine’s optimizations don’t work, and that’s why they’re running less efficiently.

To solve this problem, WebAssembly’s predecessor, ASm.js, was born. But no matter how well ASM.js solves the static typing problem, it still has to pass through the Parser and ByteCode Compiler, the two most time-consuming steps of JavaScript code in engine execution.

So in 2015, we had WebAssembly. WebAssembly is a Compiler target for C, C++, Rust, Go, Java, C# and other languages. Binary code compiled by the Compiler does not need to Go through the Parser and ByteCode Compiler steps, and is faster than ASM.js. WebAssembly enforces static typing, is syntactically completely free of JavaScript, and has a sandboxed execution environment for better security.

3. Advantages of WebAssembly

Let’s compare the recursive, non-optimized Fibonacci functions of the WebAssembly version and the native JavaScript version. Here’s how they compare at values 45, 48, and 50:

It is obvious that WebAssembly is almost twice as fast as JavaScript, which is a great advantage for high computational and performance demanding application scenarios such as image/video decoding, image processing, 3D/WebVR/AR, etc. Existing libraries written in C, C++ and other languages can be directly compiled into WebAssembly and run in the browser, and can be referenced by JavaScript as libraries. That means we can move a lot of work from the back end to the front end, taking the load off the server, which is one of WebAssembly’s most attractive features.

Let’s use another GIF to get a feel for how fast WebAssembly is running compared to JavaScript. If you want to run around and see the source code for yourself, you can move Guy Bedford’s Repo-Wasm Demo.



In addition, WebAssembly introduces features such as GC/DOM/Web API. DOM and Web API are important, which means that WebAssembly can interact directly with HTML and browsers, completely replacing JavaScript from a technical point of view.

4. Can WebAssembly replace JS

Ever since WebAssembly came along, there has been a buzz about replacing JavaScript. Their point of view is that the performance of traditional interpreted languages is poor due to lexical analysis -> grammatical analysis -> pre-parsing -> interpretation execution. However, the JS engine of modern browsers has introduced many optimization methods in the process of evolution, such as bytecode caching, which can save the process of re-traversing the syntax tree every time the interpretation is executed, and virtual machines can directly pick up -> decode -> run. Chrome V8’s JIT generates and caches machine code directly during runtime, allowing it to be executed directly by the computer the next time, eliminating decoding. While JavaScript is still far behind static languages like C and C++, the performance bottleneck for most Web applications is not the JavaScript language itself, but the loading of Web resources, which Is not advantageous to WebAssembly.

Also, when it comes to developing a new feature, whether you choose to use C, C++, Rust, or Java, the development cost is higher than JavaScript. With a webAssembly-incompatible browser (see figure below), you also have to consider downgrading to JavaScript, which adds to the complexity of the business.

5. Write at the end

While WebAssembly continues to evolve, many developers are embracing it and applying it to their businesses, believing that WebAssembly and JavaScript can coexist for the long term and thrive on their respective strengths.

The resources

  1. Know WebAssembly
  2. WebAssembly’s past, present, and future
  3. Understand the basics of using WebAssembly
  4. WebAssembly: The Silver Bullet to solve JavaScript’s ills?
  5. WebAssembly is complete – learn about wASM in its past and present
  6. WebAssembly compatibility

Personal public number: front-end development appreciation record