WebAssembly 学习笔记

WebAssembley 是什么

面向Web的通用二进制和文本格式

官网 http://webassembly.org/
从名称中，可以看到他是一个 Web字节码技术。现在运行在web上的动态语言代码，都是 JavaScript ，我们可以轻松看到网站的源代码。

WebAssembly 又称为 wasm

教程

这是一篇非常好的 WebAssemably 教程
https://segmentfault.com/a/1190000008402872

本文是对这篇教程的实践笔记，是一个流水账

运行 wasm

首先需要一个支持wasm的浏览器，我使用的是黄色 Chrome （Chrome Canary）
https://www.google.com/chrome/browser/canary.html

快速体验 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 二进制源码了

image.png

这段二进制代码，导出了两个函数， add 和 square 我们在js 代码中调用这两个函数。

从这段代码中，有如下几个推论

可以加密web 代码了。web代码不再像以前js 代码那样，以源代码形式直接暴露出来了。
WebAssembly 代码可以作为 js 的类库引用
WebAssembly 是二进制代码，执行效率肯定比 js 源代码高
WebAssembly 不是为了取代 js ，而是为了增强 js 运行效率，是js 的一个强有力的补充

如何编写WebAssembly

编写语言，支持 C/C++

以C 语言为例,

// math.c

int add (int x, int y) {
  return x + y;
}

int square (int x) {
  return x * x;
}

然后执行 emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm 就可以生成 wasm 文件了。也就是我们在上面看到的一串二进制代码。

这里，我有几个推论

WebAssebmly 目前只能用 JavaScript 调用
不能使用JavaScript编写（这意味着写 WebAssebly 需要至少懂2门语言）

还有几个疑惑

需要两门语言，门槛略高
编译的工具链还非常底层，步骤多而杂。

初步结论

WebAssembly 不是一门语言，是一个编译工具
经过WebAssebly 编译的二进制代码，可以运行在浏览器中，并使用JavaScript 进行调用
编写 WebAssembly 的语言，目前有 C/C++，以后可能会有更多（目前还没有找到其他语言的范例）
WebAssembly 有一定程度的Web代码加密作用
WebAssebly 还处在初期开发阶段，非常的不成熟，在最新的测试版浏览器中才有支持，工具链使用也相当繁琐。

参考资料

http://www.infoq.com/cn/news/2015/06/webassembly-wasm
http://www.infoq.com/cn/news/2017/07/WebAssembly-solve-JavaScript