WebAssembly 学习笔记
2018-02-23 本文已影响709人
Daniels_Cai
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
