WebAssembly introduction

The opportunity for WebAssembly

JS language defects

  1. JS only contains 64-bit floating-point numbers (double), which follow the IEEE754 standard. This can lead to inaccurate computations (e.g. 0.1 + 0.2). There are many solutions, such as: Mathjs, TC39 BigInt, processing results through toPrecision + parseFloat, etc.
  2. Weak typing of JS can lead to confusion and bugs, which can be solved by TS today;
  3. JS is not as efficient as compiled languages;
  4. Previously, web development had to use JS, and while there were various transpilers, other source code was ultimately compiled into JS, limited by the nature of JS

Google and Firefox’s different implementations of supported compiled languages

GoogleNative Client(NaCl) (obsolete)

NaCl adds portability to NaCl by using SFI technology to enable browsers to safely run native code and use the full power of the CPU

PNaClwithNaClCompiling and running

PNaClthroughPepperCommunicates with browser JS

NaCl abandoned

Other browser vendors believe that with NaCl(PNaCl), applications run in a black box, raising questions about their security. Finally, in May 2017, NaCl was scrapped and replaced by WebAssembly

firefoxasm.js

Asm.js provides developers with a way to convert C/C ++ source code into JS (a strict subset of JS). For example, with Emscripten, C/C ++ code can be compiled into ASM. js, and js engine will directly convert asM. js to assembly, and use WebGL to execute ASM. js through GPU, greatly improving the running speed. Second, asM.js modules can also interact with JS modules

AOT compilation of JS

Asm.js is the foundation of the WebAssembly Minimum Viable Product (MVP)

The downside of ASM.js: AsM.js is a text file that must be transferred over the network before any compilation, whereas Webassembly is a binary format that is smaller and therefore more efficient to transfer

The birth of WebAssembly

In April 2015, W3C set up the WebAssembly Working Group to monitor and standardize WebAssembly proposals and advocate browser vendors to use consistent specifications.

The goal of WebAssembly

  1. Specification browser vendor collaboration;
  2. JS uses WebAssembly code as easily as importing a module;
  3. Do not replace the JS engine, just add a new feature to it.

WebAssembly essence

Introduction to the

Wasm is a binary instruction format based on the stack virtual machine. WebAssembly is designed to compile high-level languages (C/C ++/Rust, etc.), provide portable results, and support deployment to the Web and server sides

The core

  1. Core specification
  2. JS API & Web API
  3. Binary and text format (Serialize the text format code to AST and eventually compile towasmBinary file)

Stack virtual machine

The stack virtual machine consists of two elements: the stack (data structure) and the instructions. The stack has two operations: push and POP, which follow last-in, first-out. The stack also contains a pointer to the top item on the stack. Instructions represent operations to be performed on items in the stack.

For example, the ADD command pops two items from the top of the stack, and after summing, pushes the result back onto the stack:

WebAssembly compilation

WebAssembly MVPS focus on C/C++, so compilation is mostly done via Clang/LLVM/Emscripten etc

WebAssembly semantic phase

When the browser gets a. Wasm file (binary), the JS engine decodes it using a decoding stack, converts the wASM file to an AST, performs type checking, and interprets it as an execution function. Figure:

instructions

phase instructions
Decoding Decode to convert the binary format into modules
Validation Validation, the verification of decoded modules (e.g., type checking) to ensure that the modules are good and safe
Phase-1: Instantiation In the first phase of instantiation, with Globals, Memories, Tables, generate an instance of the initialization module and call the start() function
Phase-2: Invocation In the second phase of instantiation, the export function is called from the module instance

Application scenarios

  • Image/video editing
  • The game
  • Music streaming, caching
  • Image recognition
  • Live video
  • VR & AR

Although these applications can also use JS, WebAssembly can greatly improve performance, and binaries can greatly reduce the size of JS compiled files (such as React bundles). Loading the instantiated WASM module on the page speeds up code execution (WebAssembly’s own thread)

limit

  • GC is not supported for the time being, C/C++ memory management is built into the language, while JAVA uses GC (memory occupied by objects no longer used by the program is automatically reclaimed);
  • You can’t access the DOM directly, you can do it through JS, Emscripten
  • Incompatible with older browsers, currently supported Webassembly browsers

Emscripten

Emscripten is an LLVM-to-JS compiler that takes LLVM bitcode output such as that produced by Clang compilation and converts it to JS. Emscripten is a combination of techniques for building, compiling, and running ASM.js.

Generate wASM modules using the Emscripten SDK Manager:

other

JS AST sample

Webassembly proposal