WebAssembly 实践：如何写代码

本文不讨论 WebAssembly 的发展，只是一步一步地教你怎么写 WebAssembly 的各种 demo。文中给出的例子我都放在 GitHub 中了（仓库地址），包含了编译脚本和编译好的可执行文件，只需再有一个支持 WebAssembly 的浏览器就可以直接运行。

配置开发调试环境

安装编译工具

略。 参考官方 Developer’s Guide 和 Advanced Tools，需要安装的工具有：

• Emscripten

• Binaryen

• WABT (WebAssembly Binary Toolkit)

安装过程挺繁琐的，得本地 clone 代码再编译。

安装浏览器

作为一个新技术，之所以说 WebAssembly 前途明媚，不仅是因为 W3C 成立了专门的 Webassembly Community Group，被标准认可；也是因为这次各大主流浏览器厂商（难得的）达成了一致，共同参与规范的讨论，在自家的浏览器里都实现了。

体验新技术，建议使用激进版浏览器，最新版本中都已经支持了 WebAssembly。

• 黄色的 Chrome (Chrome Canary)

• 紫色的 Safari (Safari Technology Preview)

• 深蓝色的 Firefox (Firefox Nightly)

• 改头换面的 IE (Microsoft Edge)

除了上边几个激进的浏览器，在主流版本里开启 flag 也是可以使用 WebAssembly 的：

• Chrome: 打开 chrome://flags/#enable-webassembly，选择 enable。

• Firefox: 打开 about:config 将 javascript.options.wasm 设置为 true。

快速体验 WebAssembly

想快速体验 WebAssembly ？最简单的办法就是找个支持 WebAssembly 的浏览器，打开控制台，把下列代码粘贴进去。

WebAssembly.compile(new Uint8Array(`  00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c  0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16)))).then(module => {  const instance = new WebAssembly.Instance(module)  const { add, square } = instance.exports  console.log('2 + 4 =', add(2, 4))  console.log('3^2 =', square(3))  console.log('(2 + 5)^2 =', square(add(2 + 5)))})

里边这一坨奇怪的数字，就是 WebAssembly 的二进制源码。

运行结果

如果报错，说明你的浏览器不支持 WebAssembly ；如果没报错，代码的运行结果如下（还会返回一个 Promise）：

2 + 4 = 63^2 = 9(2 + 5)^2 = 49

其中 add 和 square 虽然做的事情很简单，就是计算加法和平方，但那毕竟是由 WebAssembly 编译出来的接口，是硬生生地用二进制写出来的！

解释代码

上边的二进制源码一行 16 个数，有 4 行零两个，一共有 66 个数；每个数都是 8 位无符号十六进制整数，一共占 66 Byte。

WebAssembly 提供了 JS API，其中 WebAssembly.compile 可以用来编译 wasm 的二进制源码，它接受 BufferSource 格式的参数，返回一个 Promise。

那些代码里的前几行，目的就是把字符串转成 ArrayBuffer。先将字符串分割成普通数组，然后将普通数组转成 8 位无符号整数的数组；里的数字是十六进制的，所有用了 parseInt(str, 16)。

new Uint8Array(  `...`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16)))

如果浏览器支持通过 <script type="module"> 的方式引入 wasm 文件，这些步骤都是多余的（他们有这个计划）。

然后，如果 WebAssembly.compile 返回的 Promise fulfilled 了，resolve 方法的第一个参数就是 WebAssembly 的模块对象，是 WebAssembly.Module 的实例。

然后使用 WebAssembly.Instance 将模块对象转成 WebAssembly 实例（第二个参数可以用来导入变量）。

通过 instance.exports 可以拿到 wasm 代码输出的接口，剩下的代码就和和普通 javascript 一样了。

注意数据类型

WebAssembly 是有明确的数据类型的，我那个例子里用的都是 32 位整型数（是不是看不出来…… 二进制里那些 7f 表示 i32 指令，意思就是32位整数），所以用 WebAssembly 编译出来的时候要注意数据类型。

如果你乱传数据，WebAssembly 程序也不会报错，因为在执行时会被动态转换（dynamic_cast），它支持传递模糊类型的数据引用。但是你如果给函数传了个字符串或者超大的数，具体会被转成什么就说不清了，通常是转成 0。

console.log(square('Tom')) // 0console.log(add(2e+66, 3e+66)) // 0console.log(2e+66 + 3e+66) // 5e+66

想了解更多关于数据类型的细节，可以参考：Data Types。

把 C/C++ 编译成 WebAssembly

有一个在线 C++ 转 wasm 的工具： WasmExplorer

二进制代码简直不是人写的