WebAssembly - 初探

一个简单示例

使用纯JavaScript代码

  function loop(n){ // 一个空循环函数
    for(let i=0; i<n; i++){}
  }

  console.time("测试 loop函数 执行时间: ")
  let result = loop(100_000_000_000) // 执行1千亿次循环
  console.timeEnd("测试 loop函数 执行时间: ")

JavaScript代码执行时间

js代码执行时间

---

使用wasm的方式

使用WasmExplorer可以在线将C/C++代码转为wasm代码 下载转换后的wasm文件并命名为loop.wasm

WasmExplorer

c/c++转换为wasm

然后可以通过浏览器全局对象WebAssembly提供的JavaScript API进行调用

    fetch('./loop.wasm').then(response => 
      response.arrayBuffer() // 抓去loop.wasm文件将其转为字节数组，并使用Promise返回
    ).then(bytes =>
      WebAssembly.compile(bytes) // 使用WebAssembly提供的compile方法，将上一步的字节数组编译成模版（Module），并使用Promise返回
    ).then(mod => {
      const instance  = new WebAssembly.Instance(mod) // 使用Module创建一个WebAssembly实例
      const methods = instance.exports
      // console.log(methods)

      console.time("测试 loop函数 执行时间: ")
      let result = methods._Z4loopi(100_000_000_000) // 一千亿次循环
      console.timeEnd("测试 loop函数 执行时间: ")
    });

wasm执行时间

wasm执行时间

总结

1. 执行相同的代码逻辑，使用WebAssembly方式的执行时间明显要比使用纯javascript方式的执行时间要短不少。
2. 对于一些计算量大的代码逻辑或者处理时间较长的代码逻辑，使用WebAssembly方式会比使用纯javascript方式更具有时间和性能上的优势。
3. 同时WebAssembly起到了类似于Java虚拟机的作用，有利于跨平台应用开发。