WebAssembly 使用见闻

emscripten 编译工具链安装

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
$ source ./emsdk_env.sh --build=Release

运行 HelloWorld

$ mkdir hello
$ cd hello
$ cat << EOF > hello.c
#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}
EOF
$ emcc hello.c -o hello.html
$ emrun --port 8000 .

Emscripten工具能够将一段C/C++代码，编译出：

• 一个.wasm模块
• 用来加载和运行该模块的JavaScript”胶水“代码
• 一个用来展示代码运行结果的HTML文档

简而言之，工作流程如下所示：

1. Emscripten首先把C/C++提供给clang+LLVM——一个成熟的开源C/C++编译器工具链，比如，在OSX上是XCode的一部分。
2. Emscripten将clang+LLVM编译的结果转换为一个.wasm二进制文件。
3. 就自身而言，WebAssembly当前不能直接的存取DOM；它只能调用JavaScript，并且只能传入整形和浮点型的原始数据类型作为参数。这就是说，为了使用任何Web API，WebAssembly需要调用到JavaScript，然后由JavaScript调用Web API。因此，Emscripten创建了HTML和JavaScript胶水代码以便完成这些功能。

我们将涉及到的知识点：

• Fetch API - 它旨在替代传统 XMLHttpRequest ，而且它使用了 Promise API，更符合异步操作规范。
• WebAssembly API - 浏览器上的 WebAssembly 相关操作对象。
• TypedArray - 类型化数组，用于方便的操作二进制数据。

参考文档

1. https://webassembly.org/
2. asm.js 和 Emscripten 入门教程
3. 对于WebAssembly编译出来的.wasm文件js如何调用