起源WebAssembly起源于Mozilla员工的一个副项目。2010年，在Mozilla从事AndroidFirefox开发的AlonZakai利用业余时间开发了一个名为Emscripten的编译器，目的是将他之前开发的游戏引擎移植到浏览器上，可以将C++代码通过LLVMIR编译成JavaScript代码。到2011年底，Emscripten甚至能够成功编译Python和Doom等大型C++项目。这时，Mozilla觉得这个项目大有前途，于是组建了一个团队，请来了Alon全职开发这个项目。2013年，Alon等成员提出了asm.js规范。asm.js是JavaScript语言的严格子集，试图通过“减少动态特性”和“添加类型提示”来帮助浏览器改进JavaScript优化空间。与完整的JavaScript语言相比，裁剪后的asm.js更贴近底层，更适合作为编译器目标语言。asm.js只提供了两种数据类型：32位有符号整数、64位有符号浮点数，其他数据类型如字符串、布尔值或对象，asm.js根本不提供，他们都以values的形式存在，存储在内存中，通过TypedArray调用。类型声明也有固定的写法：变量|0表示整数，+变量表示浮点数。例如下面这段代码：functionMyAsmModule(){"useasm";//告诉浏览器这是一个asm.js模块functionadd(x,y){x=x|0;//变量|0表示整数y=y|0;返回(x+y)|0;}return{add:add};}支持asm.js的引擎提前识别类型，可以进行激进的JIT（即时编译）优化，甚至AOT（提前编译）编译，性能大幅提升.不支持asm.js执行，因为普通的JavaScript代码不会影响运行结果。但是asm.js的缺点也很明显，就是“底层”不够透彻，比如代码还是文本格式；代码编写仍然受限于JavaScript语法；浏览器仍然需要完成解析脚本、解释执行、收集性能指标、JIT编译等一系列步骤。如果使用像Java类文件这样的二进制格式，不仅可以减小文件大小，减少网络传输时间和分析时间，还可以选择更接近机器的字节码，从而实现AOT/JIT编译会更容易，效果会更好。更好的。与此同时，谷歌的Chrome团队也在尝试解决JavaScript的性能问题，只是方向不同。Chrome给出的解决方案是NaCl（GoogleNativeClient）和PNaCl（PortableNaCl）。借助NaCl/PNaC1，Chrome浏览器可以在沙盒环境中直接执行本机代码。Asm.js和NaCl/PNaC1技术各有优缺点，两者可以相互借鉴。Mozilla和Google也看到了这一点，所以从2013年开始，两个团队就一直在频繁地进行沟通和协作。后来他们决定结合两个项目的优势，共同开发基于字节码的技术。到2015年，“WebAssembly”被确定为正式名称并对外公开。W3C成立了WASM社区组（成员包括Chrome、Edge、Firefox和WebKit）以促进WASM技术的发展。2016年，Rust1.14发布，开始支持WASM。2017年，谷歌决定放弃PNaCl技术；四大浏览器Chrome、Edge、Safari、Firefox的更新版本开始支持WASM。2018年，Go1.11发布，开始支持WASM。2019年Emscripten更新默认使用LLVM编译为WASM代码，不再支持asm.js；WebAssembly成为万维网联盟（W3C）的推荐标准，与HTML、CSS和JavaScript一起成为Web的第四种语言。简介官方定义：WebAssembly/WASM是一个基于堆栈式虚拟机的二进制指令集，可以作为编程语言的编译目标，可以部署在Web客户端和服务端应用程序中。WebAssembly具有以下属性：它是一种类似于汇编的低级语言，可以在所有现代桌面浏览器和许多移动浏览器上以接近本机的速度运行。文件设计紧凑，因此可以快速传输和下载。这些文件也被设计成可以被快速解析和初始化的方式。设计为编译目标，用C++、Rust和其他语言编写的代码现在可以在Web上运行。也就是说，WebAssembly可以让各种语言编写的代码以接近原生的速度运行在浏览器中。WebAssembly也被设计为与JavaScript共存并协同工作，并解决了以下与JavaScript（包括asm.js）相关的问题：性能提升。因为WebAssembly是一种低级汇编语言，代码是静态类型的，浏览器可以直接编译成机器码，大大提高性能；并且因为WebAssembly是字节码的形式，所以文件体积也很小，便于快速网络传输，浏览器厂商甚至引入了“流编译”技术，让文件可以边下载边编译，下载后可以初始化。整合不同的语言。如果要在Web上执行其他语言，只能将其他语言转换成JavaScript语言，但这个过程并不容易，会带来执行性能的明显下降；而WebAssembly从设计之初就被定位为编译目标语言，让其他语言可以很方便的转换成WebAssembly语言代码，不仅不用担心性能问题（虽然还是会有一定的损失），而且还使代码重用更容易。加强代码安全。保护JavaScript代码通常只能使用混淆来大大降低代码的可读性，但借助一些工具，只需要多花一点时间就仍然可读。但是，翻译后的WASM代码根本不可读。即使通过wasm2c等工具反编译，仍然比分析JS代码困难很多（当然不会做到完全的代码安全，但是增加逆向工程的难度会让风险大大降低）。但是，WebAssembly并不是一个纯粹的浏览器平台技术，就像JavaScript和Node.js一样，现在它也有自己的运行时，在浏览器之外的云原生、区块链、安全等系统应用领域有很多应用。编译C/C++Emscripten编译：emcchello.c-ohello.wasmRustCargo编译：cargobuild--targetwasm32-example--release可以进一步压缩体积：wasm-gctarget/wasm32-example/release/hello.wasmGolang内置构建：GOARCH=wasmGOOS=jsgobuild-ohello.wasmmain.goRuninJavaScriptRuninJavaScript为了在JavaScript中运行WebAssembly，在编译/实例化之前，首先需要将模块存入内存，例如通过XMLHttpRequest或Fetch，模块将被初始化为类型化数组。使用Fetch的示例：fetch('module.wasm').then(response=>response.arrayBuffer()).then(bytes=>WebAssembly.instantiate(bytes,importObject)).then(results=>{result.instance。出口});上面的做法是先创建一个包含你的WebAssembly模块二进制代码的ArrayBuffer，然后使用WebAssembly.instantiate()来编译它。您还可以使用WebAssembly.instantiateStreaming()，它直接从原始字节码中获取、编译和实例化模块，而无需转换为ArrayBuffer：WebAssembly.instantiateStreaming(fetch('simple.wasm'),importObject).then(result=>{result.instance.exports});WebAssembly计划在未来以直接加载运行的形式支持和ES6import语句。在浏览器外运行Wasm社区提供了很多运行时容器，让WASM可以在浏览器以外的系统上执行，运行环境是沙箱化的。目前流行的Runtime：wasmtime：可以作为CLI使用，也可以嵌入到其他应用系统中，比如IoT或者云原生的WebAssemblyMicroRuntime：更偏向于芯片场景的虚拟机，顾名思义，它的体积非常小，启动速度只有100微秒，内存消耗低至100KB。底层概念模块的去中心化应用针对性优化一个WebAssembly程序的主要单元称为模块（Module）。该术语用于指代代码的二进制版本和浏览器中的编译版本。一个大型的WebAssembly应用往往由多个子模块组成，每个子模块都有自己独立的数据资源，因此子模块不能篡改其他模块的数据；另外，每个模块可以使用的权限都是由顶层调用者指定的，所以第三方子模块不能在不知情的情况下越过上层模块的权限调用。这种权限管理类似于Android开发中需要预先声明所有依赖的权限。其他高级语言编译成WebAssembly时，会变成一个模块二进制文件。文件名以后缀.wasm结尾，文件内容以一个8字节的模块头开始描述：0000000:0061736d；WASM_BINARY_MAGIC0000004:0d000000;WASM_BINARY_VERSION的前4个字节称为“MagicNumber”，对应\0asm字符串，用于标识这是一个Wasm模块；最后4个字节是当前模块使用的WASM标准版本号。模块头后面的部分是模块的主要内容。这些内容分为不同的部分（Section）。Wasm将特定功能或相关代码放入特定部分。任何模块都需要某些部分。是的，有些部分是可选的。一个段可能包含多个项目。Wasm规范一共定义了12种类型的段，并为每个段分配了ID。除自定义细分外，所有细分最多只能出现一次，并且必须按细分ID递增的顺序出现。下面是每个section的说明，其中加粗的是必须存在的section：IDsectiondescription0Customsection（自定义）主要用来存放调试信息等数据1Typesection（类型）存放导入函数的函数参数和模块内部函数列表2导入段（Import）用于存放导入函数的函数名，函数参数索引3函数段（Function）用于存放函数索引值4表段（Table）用于存储对象引用，函数指针可以通过表段实现函数（call_indirect指令）可以从外部主机导入，也可以导出到外部主机环境。环境6全局段（Global）用于存放所有变量值7导出段（Export）用于存放导出函数的函数名，函数参数索引8开始段（Start）用于指定函数索引模块初始化时的值9元素段（Elem）表段未显式初始化，元素段用于存放函数的索引值10代码段（Code）用于存放函数的指令代码11数据段（Data）用于存放初始化内存的静态数据数据类型WASM二进制编码的数据类型如下：unsignedinteger。支持三种类型的非负整数：uint8、uint16、uint32，后面的数字表示变长无符号整数占用多少位。支持三种变长非负整数类型：varuint1、varuint7、varuint32。所谓变长就是根据具体的数据大小使用多少位，后面的数字表示一个变长有符号整数最多可以占用多少位。.如上，这里允许负数，支持三种类型的浮点数：varint7、varint32、varint64。与JavaScript相同，采用IEEE-754方案，单精度为32位对于语言本身，提供了以下数值类型：i32：32位整数i64：64位整数f32：32位浮点数f64：64-bit浮点型的每个参数和局部变量必须是以上四种值类型之一，函数签名由0个或多个参数类型序列和0个或多个返回值类型序列组成。（在MVP中，一个函数最多可以有一个返回类型）。请注意，值类型i32和i64本身并不是有符号或无符号的。这些类型的解释取决于特定的运算符。布尔值表示为无符号的32位整数，0为假，非零值为真。所有其他值类型（例如字符串）都需要在模块的线性内存空间中表示。WATWASM二进制文件不可读。WAT（WebAssemblyTextFormat）是另一种输出格式，是一种使用“S-expression”的文本格式，大致可以理解为相当于二进制的汇编语言。部分浏览器的开发者工具支持将WASM转为WAT查看，方便在线调试。社区提供了wasm2wat、wat2wasm等成熟工具对两者进行转换，可以在WABT（WebAssemblyBinaryToolkit）工具集中找到，所以也可以直接写WAT再转换为WASM。WASIWebAssembly虽然是为Web而生，但并不意味着它只能也不打算只运行在浏览器上。开发者想把它推到浏览器之外，这就需要提供一套接口来与操作系统进行交互。因为WebAssembly是一种基于概念机器而非物理机器的汇编语言，WebAssembly提供了一种快速、可扩展且安全的方式来在所有计算机上运行相同的代码。此外，为了在所有不同的操作系统上运行，WebAssembly需要一个概念机器的系统接口，而不是任何一个操作系统。于是开发者定义了一个与不同操作系统通信的统一标准，称为WASI（WebAssemblySystemInterface），它是一个engine-indepent、non-Websystem-oriented（非Web系统导向）的API标准。WASI的设计遵循两个原则：可移植性。编译可移植二进制文件的能力可以编译一次并在不同的计算机上运行，??这使得用户更容易分发代码。例如，如果Node的原生模块是用WebAssembly编写的，那么用户在安装带有原生模块的应用程序时就不需要运行node-gyp，开发者也不需要配置和分发几十个二进制文件。安全。当一行代码要求操作系统执行某些输入或输出时，操作系统需要判断代码请求的操作是否安全。WebAssembly采用沙箱机制，代码不能直接与操作系统交互。宿主（可能是浏览器，或者WASMruntime）需要把相关的函数放到代码可以使用的沙箱中。主机可以限制每个程序可以做什么。虽然拥有沙盒机制并不能使系统本身更安全（主机仍然可以将所有功能沙盒化），但它至少为主机提供了创建更安全系统的选项。基于以上两个关键原则，WASI被设计成一套模块化的标准接口，其中最基础的核心模块是wasi-core，其他子集如sensors、crypto、processes、multimedia等都是基于单独的子模块形式组织。wasi-core包含了所有程序需要的基本接口，它将涵盖与POSIX几乎相同的领域，包括文件、网络连接、时钟和随机数等相关系统调用的WASI抽象函数接口。WASI在WASM字节码和虚拟机之间添加了一个“系统调用抽象层”。例如，对于C/C++源码中使用的fopen函数，当我们使用专门为WASI实现的C标准库wasi-libc编译这部分源码时，源码中fopen的函数调用过程将是间接传递这是通过调用一个名为__wasi_path_open的函数来完成的。这个__wasi_path_open函数是实际系统调用的抽象。WASI的主要工作是定义Import接口标准，提供通用Import接口在不同系统上的具体实现（类似于libc模式在不同操作系统上的实现）。基于WASI的设计思想，我们还可以针对不同的领域提供更高级的WADSI（WebAssemblyDomainSpecificInterface），将领域内的通用接口提供为Import接口，方便开发者直接使用。安全WebAssembly的安全来源之一是它是第一个共享JavaScriptVM的语言，它在运行时被沙盒化，并经过多年的验证和安全测试以确保其安全性。WebAssembly模块并不比JavaScript更易于访问，并且遵循相同的安全规则，包括同源策略等增强功能。与桌面应用程序不同，WebAssembly模块不能直接访问设备内存，而是运行时环境在初始化期间将ArrayBuffer传递给模块。模块使用这个ArrayBuffer作为线性内存，WebAssembly框架执行检查以确保代码不会在这个数组的边界之外运行。WebAssembly模块也不能直接访问存储在表段中的项目，如函数指针。该代码将使用索引值向WebAssembly框架发出访问项目的请求。然后框架访问内存并代表代码执行此项。在C++中，执行堆栈与线性内存一起驻留在内存中，虽然C++代码不应该修改执行堆栈，但可以使用指针进行修改。WebAssembly的执行栈与线性内存分离，无法被代码访问。应用案例GoogleEarthGoogleEarth于2017年发布9.0版本，使用NaCl技术开发，因此当时只能在Chrome上运行。2020年，谷歌通过WebAssembly用C++重写了该项目，此后该项目已在Firefox和Edge上运行。AutoCADAutoCAD是一款具有近40年历史的知名桌面设计软件，广泛应用于土木工程、装饰装潢、工业制图等领域。2014年AutoCAD发布网页版，借助GoogleWebToolkit（谷歌开发的可以使用Java语言开发网页应用的工具集）开发，将Android端的Java代码翻译成JS代码，但是由于生成的JS代码非常大，导致在浏览器上效率很低。2015年，将原有C++代码中的主要功能，通过asm.js直接编译移植到Web平台，性能得到大幅提升。2018年3月，基于WASM构建的AutoCADWeb也成功诞生。FigmaFigma是一款基于浏览器的协作式UI设计工具。核心的交互界面托管在一个Canvas中，这个Canvas的交互是通过WASM来控制的。基于浏览器，可以轻松跨平台运行，WebAssembly带来的高性能，使其比在原生操作系统上开发的同类应用程序甚至在Web平台上都更快。结论可以看出，WebAssembly并不是用来完全取代JavaScript，而是作为Web技术的补充，弥补了JavaScript在性能和代码重用方面的局限性。正如WASM的官方口号：“凡是能用WebAssembly实现的，最终都将用WebAssembly实现”，WebAssembly的最终目标是可以用任何语言编译，并在任何平台上高效运行。最重要的是它得到了Google、Mozilla、Edge等主流开发组织的支持，相信未来会有更实质性的发展。参考WebAssembly原理和核心技术WebAssembly实际标准化中的WASI：在Web外部运行WebAssembly的系统接口创建和使用WebAssembly模块WebAssembly|MDN
