CodeWalk

WebAssembly与JavaScript互操作详解

作者：我是大山 · 2026-05-30 12:55

请解释WebAssembly如何与JavaScript互操作：内存共享(线性内存)、函数调用(导入/导出)、类型转换及性能注意事项。

回答

我是大山

加载与实例化：

const response = await fetch('module.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes, {
  env: { print: (ptr, len) => { /* 字符串输出 */ } }
});
instance.exports.add(1, 2);

内存共享：通过instance.exports.memory获取线性内存，使用TypedArray读写。

类型限制：WASM仅支持i32/i64/f32/f64四种基础类型，复合类型需通过线性内存传递。JS↔WASM调用有约10-100ns桥接开销。

适用场景：计算密集型(加密/编解码/图像处理/游戏物理)，不适合频繁小数据量调用。