关于wasm:通过-emscripten-编写-wasm

emscripten 应用 LLVM 编译器。emscripten 官网文档

环境要求

• python 2.7.12+，3 也能够。
• mime-type 媒体类型，application/wasm，能够通过 http 头验证。

装置

# 下载 emsdk 仓库
git clone https://github.com/emscripten-core/emsdk.git && cd emsdk

# 下载并装置 sdk
./emsdk install latest

# 激活最新 sdk
./emsdk activate latest

# 激活终端环境变量
source ./emsdk_env.sh

也能够增加到环境变量中

# emsdk
export PATH=$PATH:$YOUR_DIR/emsdk
export PATH=$PATH:$YOUR_DIR/emsdk/node/14.18.2_64bit/bin
export PATH=$PATH:$YOUR_DIR/emsdk/upstream/emscripten

验证

emsdk list

一个简略的 wasm 程序

calculate_prime.c

#ifdef __EMSCRIPTEN__
    #include <emscripten.h>
#endif
#include <stdlib.h>
#include <stdio.h>

int IsPrime(int value) {
  int i;
  for (i = 2; i < value; i++) {if (value % i == 0) {return 0;}
  }
  return 1;
}

int main(int argc, char **argv) {
  int start = 0;
  int end = 100;

  printf("prime number between %d and %d\n", start, end);

  for (int i = start; i < end; i++) {if (IsPrime(i)) {printf("%d is prime\n", i);
    }
  }
  return 0;
}

</div>
</div>

编译 查看后果

emcc calculate_prime.c -o html_template.html

造成三个文件

html_template.html
html_template.js
html_template.wasm

html 次要蕴含了 wasm 的援用和实例化。通过 web API 以及 emsdk 通过 js 提供的工具进行运行。

当然也能够只生成 js 文件。

emcc calculate_prime.c -o js_plumbing.js

生成文件

js_plumbing.js
js_plumbing.wasm

生成的 wasm 文件是二进制文件，咱们能够通过将 wasm 转化成 wat 来进行浏览。

# https://github.com/webassembly/wabt
wasm2wat js_plumbing.wasm -o js_plumbing.wat

关上会看到这样的代码片段。（如何浏览 wasm?）

(module
  (type (;0;) (func (param i32 i32 i32) (result i32)))
  (type (;1;) (func (param i32) (result i32)))
  (type (;2;) (func (result i32)))
  (type (;3;) (func (param i32)))

wasm 与 javascript 交互

side_module.c

int Increment(int x) {return x + 1;}

编译

emcc side_module.c -s SIDE_MODULE=2 -O1 -s EXPORTED_FUNCTIONS=\["_Increment"\] -o side_module.wasm

• -s SIDE_MODULE=2: 将代码编译为副模块，并且 emcc 不会在生成的模块中蕴含 C 的规范库
• 优化标记 -O1，默认 -O0。-O0 保留无关函数；-O1 进行了 tree sharking; -O2 压缩并 tree sharking
• -s EXPORTED_FUNCTIONS=['_Increment'] 指定 Increment 为导出函数，须要后面减少 _，容许多个。
• *.wasm 后缀代表只生成 webAssembly 文件。

index.js 来加载 wasm

const wasmBinaryFile = 'side_module.wasm'

/**
 * WebAssembly.Memory
 * 蕴含内存、表、全局变量、函数援用等
 */
const env = {
    '__table_base': 0,
    'memory': new WebAssembly.Memory({initial: 256, maximum: 256}),
    '__memory_base': 1024,
};

WebAssembly.instantiateStreaming(fetch(wasmBinaryFile),
    {env},
).then(result => {
    const increment = result.instance.exports.Increment;
    
    console.log('get wasm export function:', increment);
    increment && console.log(increment(17).toString())
})