WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍

主要是让大家知道在js里面如何调用执行它，我之前看WebAssemblyAPI时候反正是看得一脸懵逼

也是为了大家能更快的入手这个比较新的技术吧

这边写的一个dom是官方推荐的c/c++编译的

c代码

1 int add (int x, inty) {2 return x +y;3 }4

5 int square (intx) {6 return x *x;7 }

属性c但是对字节码不熟悉的朋友可能会不理解，为什么没有main函数

这里主要是把这个c代码当成一个模块调用不需要它自己执行所以没有，官方也有有main函数的能直接生成js和html但是太过雍于，

这种方式比较推荐，也是让js能直接调用比较方便

之后使用 emscripten进行编译  emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm

然后就有math.wasm文件了，如果没装emscripten的话我博客里面有一篇是关于安装的

有了math.wasm文件后就该用js调用它了

新建math.html加入调用的方法如下：

1

2

3

4

5

6

7

Document

8

9

10

11

12

13

14 /**15 * @param {String} path wasm 文件路径16 * @param {Object} imports 传递到 wasm 代码中的变量17 */

18 functionloadWebAssembly (path, imports={}) {19 returnfetch(path)//加载文件

20 .then(response=>response.arrayBuffer())//转成 ArrayBuffer

21 .then(buffer=>WebAssembly.compile(buffer))22 .then(module=>{23 imports.env=imports.env||{}24

25 //开辟内存空间

26 imports.env.memoryBase=imports.env.memoryBase|| 0

27 if(!imports.env.memory) {28 imports.env.memory= newWebAssembly.Memory({ initial:256})29 }30

31 //创建变量映射表

32 imports.env.tableBase=imports.env.tableBase|| 0

33 if(!imports.env.table) {34 //在 MVP 版本中 element 只能是 "anyfunc"

35 imports.env.table= newWebAssembly.Table({ initial:0, element:'anyfunc'})36 }37

38 //创建 WebAssembly 实例

39 return newWebAssembly.Instance(module, imports)40 })41 }42 //调用

43 loadWebAssembly('./math.wasm')44 .then(instance=>{45 const add=instance.exports._add//取出c里面的方法46 const square=instance.exports._square//取出c里面的方法47

48 console.log('10 + 20 =', add(10,20))49 console.log('3*3 =', square(3))50 console.log('(2 + 5)*2 =', square(add(2 + 5)))51 })52

53

54

55