WebAssembly 是什么？
简单来说，WebAsembly（wasm）为 C/C++、Rust 等其他编程语言参与到 Web 开发提供了一种可行的方式。关于 WebAssembly 的详细介绍请参考 MDN 的 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代码执行时间
# 使用 wasm 的方式
使用 WasmExplorer 可以在线将
C/C++代码转为wasm代码
下载转换后的wasm文件并命名为loop.wasm
WasmExplorer
然后可以通过浏览器全局对象
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执行时间
# 总结
- 执行相同的代码逻辑，使用
WebAssembly方式的执行时间明显要比使用纯javascript方式的执行时间要短不少。 - 对于一些计算量大的代码逻辑或者处理时间较长的代码逻辑，使用
WebAssembly方式会比使用纯javascript方式更具有时间和性能上的优势。 - 同时
WebAssembly起到了类似于Java虚拟机的作用，有利于跨平台应用开发。
