Get to know webassembly quickly

WebAssembly namely Wasm Just like an efficient low-level programming language for the browser runtime , It can compile high-level languages into binary format , And in WEB Run them on , Without a browser or plug-in .

Why WebAssembly

Although modern JavaScript Is a fairly fast language , But it is unpredictable , Inconsistent implementation . and , It is not a good compilation target . Utility plug-ins are quite unfriendly and infeasible to the user experience , Such as Elm、Dart Wait for a new language to compile the scripting language . Google and Mozilla Created Native Client and asm.js To meet the needs of complex applications . However , All these attempts failed to resolve WEB The problem of safe and fast code on .

WebAssembly The first is in the 2015 Year by year JavaScript Creator Brendan Eich Proposed . Following JavaScript after , It was the first language to gain universal support . World wide web consortium （W3C） stay 2017 Developed in WebAssembly, Goals at the time ：

• Fast , Efficiency and platform ： It uses common hardware functions to execute near native code performance on different platforms . Compact code can be decoded in one pass 、 Verify and compile , Just like instant or early compilation .
• Readable and debuggable ： Well defined code , Convenient for inspection and commissioning , Programs can be broken down into modules that can work independently （ Smaller parts ）.
• decode 、 Validation and compilation are streaming （ Start before you see all the data ） And parallelizable （ It can be split into many independent parallel tasks ）.
• Don't destroy WEB, Keep backward compatibility .

WebAssembly Definition

Wasm Is based on the stack of virtual machine binary instruction format . Wasm Designed to be portable , Used to compile C/C++ or Rust Wait for advanced language , Support in Web Deploy client and server applications .

• Binary instruction format ： Text formatted WebAssembly The code is used to define the abstract syntax tree , It describes the components of the program and simplifies verification and compilation .AST Compiled （ Use Emscripten SDK Wait for the compiler ） In binary format .wasm file , The file is loaded into the web page . Browser's JavaScript The engine then uses the decoding stack to decode the file back AST To explain it .
• Portable target for compilation ： because WebAssembly Designed to run on virtual machines ; Regardless of the operating system and instruction set architecture , It can run on various devices .

WebAssembly advantage

WebAssembly Is rapidly becoming a mainstream technology , It is adopted by all major browser vendors , Especially because of the near native code performance . besides WebAssembly It also has the following advantages ：

• Better performance ：WebAssembly Provides enhanced performance in two ways , That is, startup speed and throughput . Smaller JavaScript Need to be parsed 、 explain 、 Compile and optimize . On the other hand ,wasm More compact , And because of its simple design , The binary format allows for faster parsing and fast optimization .
• Portable and safe ： It's platform independent 、 Hardware independent and language independent , It has no special requirements for devices or browsers , This enhances its portability , The code is validated and executed in a memory safe sandbox environment , It can prevent security vulnerabilities and data corruption .
• Integrate legacy libraries ： If the application uses C/C++ Or any other compatible language ,WebAssembly You can easily make code or desktop applications available to Web. Two libraries are usually used ; be used for Rust Of wasm-pack And for C/C++ Of Emscripten.

WebAssembly Application scenarios

WebAssembly Usually used for computing intensive applications that require high performance . These include metacosmic related technologies AR/VR Real time development 、 Video editing 、VPN、 Image recognition, etc . To understand learning wasm All kinds of technology , please Click here .

• stay tensorflow.js Add wasm After backend support , The performance of the model is improved 10 About times .
• Because it was originally used C++ Compiling , therefore Figma Use Emscripten Export to Asm.js, By adding the appropriate Emscripten Sign activated WebAssembly after , Probably 3 Times performance improvement .
• Switch to WebAssembly after ,OpenCV Python The performance improvement of the library is very obvious . ResNet50 The reasoning time has increased 15 times , The speed of kernel performance test has been improved 3.5 times .
• Unity Use Emscripten Output WebAssembly Export a web player for a game , Traditionally due to JavaScript The speed is too slow to export to Web The game of , stay Web Consistently good performance on .

After being widely supported by browsers , Some heavyweight applications are gradually transplanted to Web On , Include ：

• Google Earth： One mainly presents the earth based on satellite images 3D Represents the software .
• AutoCAD： Computer aided design and drawing software applications , It is a desktop application running on a microcomputer with an internal graphics controller .
• TensorFlow： Free open source software library for machine learning and artificial intelligence .

WebAssembly Realization

Depending on the language used , There are four ways to Web Implemented in the application WebAssembly.

• Use Emscripten transplant C/C++ Applications .
• Write or build directly at the assembly level WebAssembly
• Write a Rust Application and will WebAssembly As its output .
• Use to compile as WebAssembly Binary files AssemblyScript.

Embed... In the application WebAssembly

As shown in the figure below , Whether it's Web Application or non application Web application , Need to be embedded in the host program WebAssembly Can only be used at runtime WebAssembly. The only difference is , stay Web In the application , The host program is the browser , But not right Web Scene , The host program is its own application , Specific to the back-end application that this article focuses on , The host program is a back-end service .

Currently available WebAssembly The runtime includes Wasmtime、WasmEdge、WAVM、Wasmer etc. , Each has its own advantages and disadvantages .

WebAssembly limitations

Although new functions are constantly developed , but WebAssembly Its function is limited .

• No garbage collection ： With garbage collection JavaScript Different ,Wasm Use a flat surface / Linear memory model , Allocate a large amount of memory during instantiation and do not automatically reclaim memory .
• No direct access DOM：WebAssembly Unable to access document object model (DOM), whatever DOM All operations need to use JavaScript Indirectly complete . perhaps , Through JavaScript Glue code complete DOM In case of operation , You can also use any tool chain , for example Emscripten. Performance depends on the library used .
• Old browsers don't support ： Usually older browsers don't have the ability to instantiate and load Wasm Required objects for the module .