JavaScript与WebAssembly通过共享内存和函数调用实现高效协作，JS处理DOM与异步，wasm执行计算密集任务，数据传递需手动序列化，推荐使用Emscripten或AssemblyScript优化集成。
JavaScript 与 WebAssembly 的交互是现代前端性能优化的重要手段。WebAssembly（简称 wasm）是一种低级字节码，能在浏览器中接近原生速度运行，适合计算密集型任务，比如图像处理、音视频编码、游戏逻辑等。而 JavaScript 擅长 DOM 操作、事件处理和异步控制。两者结合，可以发挥各自优势。
数据类型与内存管理
WebAssembly 使用线性内存模型，通过 ArrayBuffer 在 JavaScript 和 wasm 之间共享数据。
wasm 模块的内存通常暴露为一个 WebAssembly.Memory 对象，JavaScript 可以通过 TypedArray（如 Uint8Array、Float64Array）读写这块内存。
- 基本类型（int、float）可以直接传递
- 字符串、对象等复杂类型需手动序列化：将字符串转为 UTF-8 字节数组写入内存，再传指针和长度给 wasm 函数
- wasm 不自动管理内存，需在 JavaScript 或 wasm 内部（如使用 C/C++ 的 malloc/free）手动分配与释放
JavaScript 调用 WebAssembly 函数
编译后的 wasm 模块导出函数，可在 JavaScript 中直接调用。
立即学习“Java免费学习笔记（深入）”；
例如使用 Emscripten 编译 C 代码：
// add.c
int add(int a, int b) {
return a + b;
}
编译为 wasm 后，在 JS 中加载并调用：
WebAssembly.instantiateStreaming(fetch('add.wasm'))
.then(result => {
const { add } = result.instance.exports;
console.log(add(2, 3)); // 输出 5
});
注意：导入的函数参数只能是数值类型，不能直接传字符串或数组。
WebAssembly 调用 JavaScript 函数
wasm 可以导入并调用 JavaScript 函数，用于回调、打印日志或访问浏览器 API。
在实例化时通过导入对象传入：
const importObj = {
env: {
js_log: (ptr, len) => {
const bytes = new Uint8Array(memory.buffer, ptr, len);
const str = new TextDecoder().decode(bytes);
console.log(str);
}
}
};
WebAssembly.instantiateStreaming(fetch('module.wasm'), importObj)
.then(result => { ... });
这样 wasm 代码就可以通过调用 js_log 打印信息。
工具链与集成建议
实际开发中，推荐使用 Emscripten 或 AssemblyScript 简化集成流程。
- Emscripten 支持将 C/C++ 代码编译为 wasm，并自动生成胶水代码，处理内存、函数封装和 JS 互操作
- AssemblyScript 是 TypeScript 的子集，专为 wasm 设计，语法更贴近前端开发者习惯
- 对于频繁交互的场景，尽量减少跨边界调用次数，批量传输数据以降低开销
基本上就这些。掌握好内存管理和调用约定，JavaScript 与 WebAssembly 的协作就能既高效又稳定。不复杂但容易忽略细节。
