WebAssembly工作原理和JavaScript语言性能对比分析

本文简单说明WebAssembly（简称wasm）工作原理和高性能的原由（和JavaScript相比）。

不过需要提醒的是Wasm并非设计来完全替代JS，而是对JS的一个强大补充，JS中一部分高性能应用可以使用wasm来进行替代，比如React小组就准备用Wasm来重写其Reconciler部分（该部分用来管理组件加载和刷新），这些变动对React的使用者不可见，但会享受到Wasm带来的性能提升。Wasm在最新版本的Chrome中已经默认启用。

JS工作方式（以V8为例）

现代JS引擎都使用JIT（Just-in-time）编译技术来提升性能。下图是V8引擎工作流程图：

其中Ignition是JS解析器（Interpreter），用来生成字节码以减少内存开销和提升页面启动速度。

Crankshaft和TurboFan是不同类型代码的优化编译器（Optimizing Compiler），

用来在运行期间监控代码执行过程并生成优化后的编译代码。

新版（V8 5.8版本之后）上述流程将发生变化，IG+Fullcodegen+Crankshaft+TurboFan将被简化为IG(Ignition)+TF(TurboFan)。

Wasm工作方式

Wasm的工作方式是从服务器上加载后缀名为.wasm的代码文件，V8引擎中的wasm compiler将负责对其解码并编译为机器码，从而可以被浏览器所执行。

为什么快

本质上是因为wasm是一门“低级语言”，具体原因有如下几个：

• 从网络上获取wasm代码比js代码要快，因为其代码更精简；

• 解码wasm比解析js要更快；

• 代码编译和优化要更快，因为wasm更接近机器码并且可以在服务器上提前做优化；

• wasm是包含类型的，可以节约大量类型判断的代码和编码反复优化的问题；

• 内存由程序控制无需GC；

• wasm是面向目标机器的低级语言，所以指令设计上可以针对编译目标做优化。