WebAssembly early impression

2018-11-10 11:35:56

JavaScript has been having a dominant position in web programming, web page in the course of evolution, the JavaScript performance improvement has undergone continuous reform.
It was originally execution speed is not fast, in which a relatively large turning point in 2008, many browsers to introduce Just-in-time (JIT, will be mentioned later in the article) compiler, greatly improving the efficiency of the implementation of JavaScript it also allows JavaScript can be used to start in the back-end field.

With rich web content to achieve the page in 3D gaming, audio and video processing has been more and more attention, but how to provide a better sense of speed and experience in the web page it is always a challenge.
JavaScript as a weakly typed language, logic in the front end of the growing strength of collaboration between the need for more restrictions to better help programmers.
So there have been some problems trying to solve:

1. The syntax is too flexible.
2. performance.

The syntax is too flexible

For at this point, it appeared on the market TypeScript, to join JS static type checking.
But this finally be compiled into JS, did not improve performance.

Solution of 曾经 决方 method

• Google developed Dart, to the browser introduced a new virtual machine to run directly Dart program to improve performance, but only Google browser, not many people use.
• Firefox launched asm.js, it is a subset of JS, let the engine do asm.js for performance optimization. asm.js too simple syntax, restrictions and more.

What is WebAssembly

WebAssembly is a new bytecode format .
JS and perform different interpretation is required, and the underlying machine code bytecode webassembly very similar, fast loading operation, thus the performance with respect to the JS interpreted greatly enhanced.
High-level programming languages compile the bytecode into WebAssembly virtual machine to run, browser vendors need to do is implement a virtual machine according to WebAssembly specification.
Because very close to machine code, it can very quickly be translated into machine code corresponding to the architecture.

优点 of WebAssembly

• small volume.
  Browser loads only the compiled byte code, logic than with the same volume of JS much smaller.
• Load fast.
  Small size, no need to explain the implementation.
• Fewer compatibility issues.
  WebAssembly develop after a good few changes. Local compatibility issues that may arise interface specification JS and WebAssembly bridge.

Why is it faster than JavaScript?

First, the time consumed to run JavaScript has the following tasks:

1. Parsing: Code → source code interpreter can run time spent;
2. Compiling + optimizing: baseline compiler and compiler optimization time spent (PS: Some optimizing compilers is not the main thread running, it is not included)
3. Re-optimizing: JIT find the optimized hypothesis errors, discard the spent time code optimization. Including weight optimization of time, abandoned and returned to the baseline time compiler.
4. Time code execution: Execution
5. Garbage collection: garbage collection, clean up the memory of the time
   these tasks are performed by the cross, such as the ongoing resolution process when some other code is running, while others are being compiled.

These stages not according to the order, there is a part of the code may be in phase, some may at stage 3, and the like. This law is what brought JIT, also because of this, JS efficiency it has improved.
Even WebAssembly intermediate code itself, not like the JS code as abstract syntax tree is then decomposed to be converted. Before the beginning of the code is compiled optimized, you do not need to know the type.
And JIT do different compilers different optimization process, which is why a piece of code could run quickly in Google Chrome, but in other browsers not so fast, but WebAssembly at this time have experienced the optimization process , you can omit this optimization time. On garbage collection, WebAssembly is designed to allow developers to write code to manually recover, the browser is automatically recovered by default, so sometimes in fact, there is no need to check.

WebAssembly can be compiled into a high-level language

Currently WebAssembly can be compiled into a high-level language are:

• AssemblyScript
  grammar and TypeScript consistent.
• c \ c ++
  official recommended way.
• Rust
  grammatical complexity.
• Kotlin
  syntax and Java, JS similar.
• Golang:
  The syntax is simple. For WebAssembly still not officially released in stages.

Prospects of WebAssembly

In summary, WebAssembly it is ideal for scene requires a lot of computing:

• Processing audio and video in the browser.
• dom diff with WebAssembly rewrite can improve performance. RN of application performance can be improved.
• Large 3D web games (egrets engine has begun to explore the use WebAssembly).

Epilogue

This conclusion is I integrate a number of articles and information online and written, for study and reference, thank you.