javaScript 与 WebAssembly 通过共享内存、函数调用和数据传递实现高效协作：js 调用 wasm 导出函数处理高性能任务，WASM 借助导入的 JS 函数操作 dom；两者通过线性内存交换复杂数据，如字符串以 UTF-8 编码存入共享 ArrayBuffer，由指针定位并用 TextDecoder 解析；数值类型自动转换，复合类型需手动序列化；借助 WebAssembly.Memory 实现内存共用，避免大数据拷贝；通过 fetch 加载 wasm 模块，instantiatestreaming 编译实例化，配合 importObject 注入 JS 功能；Emscripten 等工具生成胶水代码简化开发；关键在于管理好类型映射、内存视图和调用栈，确保高效安全交互。
javascript 与 WebAssembly 的交互机制建立在两者互补的基础上：JavaScript 灵活但执行效率有限，WebAssembly 高性能但缺乏直接操作 DOM 和浏览器 API 的能力。它们通过内存共享、函数调用和数据传递实现高效协作。
数据类型映射与通信基础
WebAssembly 当前主要支持四种基本数值类型（i32, i64, f32, f64），而 JavaScript 使用动态类型。因此，在交互时需要进行类型转换：
- 整数和浮点数可以直接传入或返回
- 字符串、数组等复合类型需通过线性内存（Linear Memory）共享，通常以 UTF-8 编码写入内存，由 JavaScript 读取或反之
- 指针式传递常见：WASM 函数返回一个偏移地址，JS 通过 TextDecoder 从内存中解析字符串
例如，WASM 模块输出字符串时，会将其写入共享内存，并返回起始位置索引，JavaScript 再使用 WASM 暴露的内存实例读取内容。
函数调用双向互通
JavaScript 可以调用导出的 WebAssembly 函数，同时 WebAssembly 也能导入并调用 JavaScript 函数。
- WASM 导出函数在 JS 中表现为普通函数，可直接调用，参数自动转换（除复杂类型）
- JS 可将函数作为“导入对象”注入 WASM 实例，供其回调使用
- 注意栈管理：频繁互相调用可能引发堆栈问题，尤其在递归场景中需谨慎设计
比如音视频处理库用 WASM 实现核心算法，进度回调则通过导入的 JS 函数通知页面更新 ui。
共享内存与性能优化
WebAssembly 和 JavaScript 共享同一块 ArrayBuffer，这是高效数据交换的关键。
立即学习“Java免费学习笔记（深入）”；
- 通过 WebAssembly.Memory 创建可变长度内存，供双方访问
- JS 使用 new Uint8Array(wasmInstance.memory.buffer) 构建视图操作内存
- 避免重复拷贝：大数组处理时，直接在共享内存中读写比序列化传输快得多
图像处理场景下，像素数据一次性写入内存，WASM 处理后原地修改，JS 再读回显示，极大减少开销。
模块加载与实例化流程
现代浏览器通过 WebAssembly.instantiateStreaming 直接编译和实例化 .wasm 文件。
- fetch 获取 wasm 二进制流，配合 importObject 注入 JS 功能
- 成功后返回包含 module 和 instance 的对象，instance.exports 提供可用函数
- 开发中常借助工具链（如 Emscripten）自动生成胶水代码，简化内存管理和类型转换
基本上就这些。只要理解了内存共用、类型限制和调用边界，就能有效整合 WASM 性能优势到网页应用中。不复杂但容易忽略细节。