本文转载自微信公众号《程序员大巴》，作者是图雀。转载本文请联系程序员巴士公众号。大家好，我是皮糖。最近两个月主要研究WebAssembly（WASM）相关内容，了解到WASM填补了Web缺失的部分：性能媲美原生。有一点这方面的经验，分享给大家。这篇文章要讲什么？了解WebAssembly的前世今生，这个致力于让Web得到更广泛应用的伟大创造如何在Web/Node.js的整个生命周期中发挥作用，探索为什么WASM是Web的未来？在整篇文章的讲解中，你可以了解到WebAssemblynative、AssemblyScript、Emscripten编译器。最后，也展望了WebAssembly的未来，罗列了一些激动人心的技术发展方向。为什么需要WebAssembly？动态语言的后跟首先我们来看一下JS代码的执行过程：上面是MicrosoftEdge之前的ChakraCore引擎结构。目前，MicrosoftEdge的JS引擎已经切换到V8。整体流程是：获取JS源码，交给Parser，生成ASTByteCodeCompiler将AST编译成字节码（ByteCode）ByteCode进入翻译器，翻译器逐行翻译字节码（Interpreter）成机器码（Interpreter）机器代码），然后执行它。但其实我们平时写的代码有很多可以优化的地方。如果同一个函数被多次执行，那么这个函数生成的MachineCode可以被标记为优化，然后打包发送给JITCompiler（Just-In-Time），下次再执行这个函数时，就不会了不需要经过Parser-Compiler-Interpreter流程，可以直接执行准备好的MachineCode，大大提高了代码的执行效率。但是上面提到的JIT优化只能针对静态类型的变量，比如我们要优化的函数，它只有两个参数，每个参数的类型是确定的，而JavaScript是动态类型语言，这也就意味着，函数执行过程中，类型可能会动态变化，参数可能变成三个，第一个参数的类型可能从对象变成数组，这会导致JIT失败，需要Parser-Compiler-Interpreter-Execuation重新执行，而Parser-Compiler这两个步骤是整个代码执行过程中最耗时的两个步骤，这也是为什么在JavaScript语言的背景下，Web无法执行一些高性能的应用，比如如大型游戏、视频剪辑等静态语言优化根据上面的描述，其实造成JS执行慢的主要原因之一是因为其动态语言的特性，从而导致JIT失败。因此，如果我们能够在JS中引入静态特性，那么我们就可以保持一个有效的JIT，势必会提速。JS的执行速度，这时候asm.js出现了。asm.js只提供了两种数据类型：32位有符号整数64位有符号浮点数其他的比如字符串、布尔值或者对象都是以值的形式存储在内存中，通过TypedArray调用。整数和浮点数表示如下：ArrayBuffer对象、TypedArray视图和DataView视图是JavaScript操作二进制数据的接口。二进制数据用数组语法处理，统称为二进制数组。请参见数组缓冲区。vara=1;varx=a|0;//x为32位整数vary=+a;//y为64位浮点数函数写法如下：functionadd(x,y){x=x|0;y=y|0;return(x+y)|0;}上面的函数参数和返回值需要声明类型，这里是32位整数。而且，asm.js并没有提供垃圾回收机制。内存操作由开发者自己控制，通过TypedArray直接读写内存：varbuffer=newArrayBuffer(32768);//申请32MB内存varHEAP8=newInt8Array(buffer);//每次读取1字节的视图一次HEAP8functioncompiledCode(ptr){HEAP[ptr]=12;returnHEAP[ptr+4];}从上面可以看出，asm.js是JavaScript的严格子集，需要在运行时确定变量的类型，而它无法更改，去除了JavaScript自带的垃圾回收机制，需要开发者手动管理内存。这样JS引擎就可以基于asm.js代码进行大量的JIT优化。据统计，asm.js在浏览器中的运行速度约为原生代码（机器码）的50%。推陈出新，但不管asm.js多么静态，摆脱掉一些耗时的上层抽象（垃圾回收等）仍然属于JavaScript的范畴。代码执行还需要Parser-Compiler这两个进程，这两个进程也是代码执行中最耗时的。为了极致的性能，Web的前沿开发者抛弃了JavaScript，创造了一种可以直接处理MachineCode的汇编语言WebAssembly，直接干掉Parser-Compiler。同时，WebAssembly是一种强类型的静态语言，可以最大化WebAssembly的JIT优化，使得WebAssembly的速度无限接近于C/C++等原生代码。相当于下面的过程：可以不用Parser-Compiler直接执行，同时干掉垃圾回收机制，最大程度的针对JIT优化了WASM静态强类型语言的特性。WebAssembly初探我们可以通过一张图直观的了解WebAssembly在Web中的地位：WebAssembly（又称WASM），是一种可以在Web上运行的新语言格式，而且体积小，性能高,和便携。它在底层类似于Web中的JavaScript，也是W3C认可的第四种Web语言。和JavaScript在底层类似的原因有几个：和JavaScript同级执行：JS引擎，比如Chrome的V8和JavaScript，可以运行各种WebAPI，WASM也可以运行在Node.js或其他在WASM运行时。WebAssembly文本格式其实是一堆可以直接执行的二进制格式，但为了方便在文本编辑器或开发者工具中显示，WASM还设计了一种“中间”文本格式，以.``wat或.wast是扩展名，然后通过wabt等工具，将文本格式的WASM转换为二进制格式的可执行代码，扩展格式为.wasm。我们看一段WASM文本格式的模块代码：(module(func$i(import"imports""imported_func")(parami32))(func(export"exported_func")i32.const42call$i))上面的逻辑代码如下：先定义一个WASM模块，然后从一个importsJS模块导入一个函数imported_func，命名为$i，接收参数i32，然后导出一个函数exported_func，可以从WebApp导入，比如JS,foruse然后为参数i32传入42，然后调用函数$i。我们使用wabt将上述文本格式转换为二进制代码：将上述代码复制到一个名为simple.wat的新文件中并保存。使用wabt编译转换安装wabt后，运行如下命令编译：wat2wasmsimple.wat-osimple.wasm被转换为二进制，但无法在文本编辑器中查看其内容。为了查看二进制内容，我们可以在编译时加上-v选项，让命令行输出内容：wat2wasmsimple.wat-v输出结果如下：可以看到，WebAssembly其实就是二进制代码格式。即使它提供了稍微易读的文本格式，也很难真正用于实际编码，更不用说开发效率了。尝试使用WebAssembly作为编程语言由于以上二进制和文本格式都不适合编码，因此WASM不适合作为普通的开发语言。为了突破这个限制，AssemblyScript应运而生。AssemblyScript是TypeScript的一个变体，它将WebAssembly类型添加到JavaScript中，可以使用Binaryen将其编译成WebAssembly。WebAssembly的类型大致有：i32、u32、i64、v128等小整数类型：i8、u8等可变整数类型：isize、usize等。Binaryen在递交之前会将AssemblyScript静态编译成强类型的WebAssembly二进制文件交由JSEngine执行，所以虽然AssemblyScript带来了一层抽象，但实际用于生产的代码仍然是WebAssembly，保留了WebAssembly的性能优势。AssemblyScript在设计上与TypeScript非常相似，提供了一组可以直接操作WebAssembly和编译器特性的内置函数。内置函数：静态类型检查：函数isInteger(value?:T):``bool和其他实用函数：函数sizeof():usize等操作WebAssembly：函数select(ifTrue:T,ifFalse:T,condition:``bool``):Tetc.functionload(ptr:usize,immOffset?:usize):Tetc.functionclz(value:T):T等数学运算内存操作控制流程SIMDAtomicsInlineinstructions然后构建一个基于这组内置函数的一组标准库。标准库：GlobalsArrayArrayBufferDataViewDateErrorMapMathNumberSetStringSymbolTypedArray例如一个典型的Array使用如下：vararr=newArray
