JavaScript 中如何使用 WebAssembly？

推荐答案

在 JavaScript 中使用 WebAssembly 的步骤如下：

1. 加载 WebAssembly 模块：使用 fetch 或 XMLHttpRequest 加载 .wasm 文件。
2. 编译和实例化：使用 WebAssembly.instantiate 或 WebAssembly.instantiateStreaming 方法编译和实例化 WebAssembly 模块。
3. 调用导出的函数：通过实例化后的对象调用 WebAssembly 模块中导出的函数。

// www.javascriptcn.com code example
// 1. 加载 WebAssembly 模块
fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    // 2. 编译和实例化
    const instance = results.instance;

    // 3. 调用导出的函数
    const result = instance.exports.add(1, 2);
    console.log(result); // 输出 3
  });

本题详细解读

1. 加载 WebAssembly 模块

WebAssembly 模块通常以 .wasm 文件的形式存在。你可以使用 fetch 或 XMLHttpRequest 来加载这些文件。fetch 是更现代的方式，推荐使用。

fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => {
    // bytes 是一个 ArrayBuffer，包含 WebAssembly 模块的二进制数据
  });

2. 编译和实例化

加载 .wasm 文件后，你需要将其编译并实例化。WebAssembly.instantiate 方法可以同时完成编译和实例化。

WebAssembly.instantiate(bytes)
  .then(results => {
    const instance = results.instance;
    // instance 是 WebAssembly 模块的实例
  });

如果你使用的是现代浏览器，并且 .wasm 文件是通过网络加载的，你可以使用 WebAssembly.instantiateStreaming 方法，它可以直接从流中编译和实例化 WebAssembly 模块，效率更高。

WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(results => {
    const instance = results.instance;
    // instance 是 WebAssembly 模块的实例
  });

3. 调用导出的函数

WebAssembly 模块可以导出函数供 JavaScript 调用。你可以通过实例化后的 instance.exports 对象访问这些函数。

const result = instance.exports.add(1, 2);
console.log(result); // 输出 3

在这个例子中，add 是 WebAssembly 模块中导出的一个函数，它接受两个参数并返回它们的和。

4. 处理内存

WebAssembly 模块还可以导出内存对象，允许 JavaScript 和 WebAssembly 之间共享内存。你可以通过 instance.exports.memory 访问这个内存对象。

const memory = instance.exports.memory;
const buffer = new Uint8Array(memory.buffer);
// 现在你可以通过 buffer 访问 WebAssembly 的内存

5. 错误处理

在实际应用中，你可能需要处理加载、编译或实例化过程中可能出现的错误。你可以使用 catch 方法来捕获这些错误。

// www.javascriptcn.com code example
WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(results => {
    const instance = results.instance;
    const result = instance.exports.add(1, 2);
    console.log(result);
  })
  .catch(error => {
    console.error('Error:', error);
  });

通过这些步骤，你可以在 JavaScript 中成功使用 WebAssembly，并调用其导出的函数。