# WebAssembly 是什么
简单来说，WebAsembly（wasm）为 C/C++、Rust 等其他编程语言参与到 Web 开发提供了一种可行的方式。<br/> 关于 WebAssembly 的详细介绍请参考 MDN 的 WebAssembly 文档
# 一个简单示例
# 1、使用 JavaScript 方式
# 1.1、纯 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函数 执行时间: ") |
# 1.2、JavaScript 代码执行时间
# 2、使用 wasm 的方式
# 2.1、将目标代码转换为 wasm
使用 WasmExplorer 可以在线将 C/C++ 代码转为 wasm 代码
下载转换后的 wasm 文件并命名为 loop.wasm
# 2.2、通过全局对象 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函数 执行时间: ") | |
}); |
# 2.3、wasm 执行时间
# 3、总结
执行相同的代码逻辑，wasm 的执行时间明显要比使用纯 javascript 的执行时间要短不少。对于一些计算量大的代码逻辑或者处理时间较长的代码逻辑，使用 wasm 的方式会比使用纯 javascript 方式更具有时间和性能上的优势
