WebAssembly 使用示例

由于WebAssembly是新技术,它还在快速演变中,当你读到本文时也许本文的内容已经不适用了。

Google、苹果、微软和Mozilla的正在联合开发WebAssembly。WebAssembly(wasm)是一种可用于浏览器中的字节码(bytecode),可使浏览器性能提升20倍。字节码是一种机器可读的指令集,与脚本语言相比,字节码的加载速度更快。WebAssembly项目旨在开发全新的字节码,从而让桌面和移动端浏览器变得更高效。

目前浏览器使用JavaScript动态脚本语言来解释代码,提供网站上诸如表格和动态内容等功能。但基于字节码的系统与Java有些类似,执行速度更快。WebAssembly 可以作为任何编程语言的编译目标,也就是可以使用其他任何语言编写web组建。例如,Emscripten可以把C/C++编译为asm.js,然后使用Binaryen把asm.js代码编译为wasm。

 开启浏览器的WebAssembly支持

Chrome,在浏览器地址栏输入 chrome://flags/,找到WebAssembly一项:

WebAssembly的使用示例

Firefox,在浏览器地址输入 about:config,找到 javascript.options.wasm,把值改为true。

最后重启浏览器。

asm.js

Wasm是受asm.js的启发。asm.js是一个非常容易优化的JavaScript子集。它可以在所有的浏览器中无插件运行。下面我们写一段简单的asm.js代码:

MyMathModule.asm.js:

调用方法:

执行结果:

WebAssembly的使用示例

WebAssembly

现在我们有了一段简单的asm.js代码,下面我们使用工具 binaryen 把它编译为wasm。

Binaryen is a compiler and toolchain infrastructure library for WebAssembly, written in C++. It can:

  • Parse and emit WebAssembly, supporting the current S-Expression format.
  • Interpret WebAssembly. The interpreter passes 100% of the spec test suite.
  • Compile asm.js to WebAssembly, which together with Emscripten which compiles C and C++ to asm.js, gives you a complete compiler toolchain from C and C++ to WebAssembly. This passes all of the relevant part of Emscripten’s test suite (everything but some odd Emscripten features like split memory).
  • Polyfill WebAssembly, by running it in the interpreter compiled to JavaScript, if the browser does not yet have native support.

Binaryen托管在Github,你需要自己编译这个工具。这是很烦人的过程,因为这些工具还不稳定,一直有大的变化。构建和使用方法请阅读Readme.md文件。

我使用Mac OS X;首先clone源码:

编译:

生成的工具:

WebAssembly的使用示例

首先使用asm2wasm把asm.js代码转换为 .wast 格式代码,它是文本表示的AST字节码,类似于中间文件。

WebAssembly 使用示例

wast中的内容:

使用wasm-as把.wast文件编译为wasm:

查看wasm文件中的内容:

WebAssembly 使用示例

最后在浏览器中使用JavaScript调用wasm。查看JS.md,文档说明了怎么通过JavaScript调用wasm。创建一个html文件:

开启一个本地http服务进行测试;

出现了一个错误

WebAssembly 使用示例

由于是在experimental阶段,bug很多。如果你可以正常运行,你应该可以看到和asm.js代码一样效果:

WebAssembly 使用示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注