JavaScript与WebAssembly集成旨在结合两者优势：JavaScript负责DOM交互，Wasm处理高性能计算。通过fetch加载Wasm模块，共享线性内存传递数据，Emscripten生成胶水代码简化开发，并支持Wasm调用JS实现双向通信，提升Web应用性能。
WebAssembly（简称Wasm）是一种低级的类汇编语言，设计用于在现代浏览器中以接近原生速度运行高性能应用。JavaScript 与 WebAssembly 的集成让开发者可以将计算密集型任务交给 Wasm 处理，同时利用 JavaScript 管理 DOM、事件和用户交互，实现性能与灵活性的完美结合。
为什么需要 JavaScript 与 WebAssembly 集成？
JavaScript 是 Web 开发的核心语言，但在处理图像处理、音视频编码、物理模拟或加密运算等高负载任务时存在性能瓶颈。WebAssembly 弥补了这一不足：
- 执行速度接近本地代码，特别适合 CPU 密集型任务
- 可由 C/C++、Rust 等语言编译生成，复用现有高性能库
- 与 JavaScript 同在一个运行环境中，可通过 API 相互调用
两者不是替代关系，而是互补协作：JavaScript 负责“协调”，Wasm 负责“计算”。
基本集成方式：加载与调用 Wasm 模块
最基础的集成是从 JavaScript 加载并运行一个 .wasm 文件。流程包括获取二进制数据、编译、实例化，并通过导出函数调用。
立即学习“Java免费学习笔记（深入）”；
示例：使用 fetch 和 WebAssembly.instantiateStreaming
(async () => {
const response = await fetch('add.wasm');
const { instance } = await WebAssembly.instantiateStreaming(response);
<p>// 调用导出的 add 函数
console.log(instance.exports.add(5, 7)); // 输出: 12
})();
其中 add.wasm 是由如下简单 C 函数编译而来：
int add(int a, int b) {
return a + b;
}
编译命令（使用 Emscripten）：
emcc add.c -o add.wasm -s STANDALONE_WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s NO_ENTRY=1
内存管理与数据传递
JavaScript 与 WebAssembly 共享线性内存（Linear Memory），这是高效通信的关键。所有复杂数据（如字符串、数组）都需通过共享内存传递。
常见模式：
- Wasm 模块导出一块 WebAssembly.Memory 实例，JS 可通过 new Uint8Array(memory.buffer) 创建视图读写
- JS 分配内存并传入指针给 Wasm 函数（常见于 Emscripten 生成的胶水代码）
- 字符串需编码为 UTF-8 写入内存，Wasm 处理后再由 JS 解码读取
示例：JS 向 Wasm 传递字符串
const encoder = new TextEncoder();
function passStringToWasm(str) {
const bytes = encoder.encode(str + '\0'); // 添加 null 终止符
const ptr = instance.exports.malloc(bytes.length);
new Uint8Array(instance.exports.memory.buffer).set(bytes, ptr);
return ptr;
}
<p>// 调用处理字符串的函数
const ptr = passStringToWasm("hello");
instance.exports.process_string(ptr);
instance.exports.free(ptr);
注意手动管理 malloc/free，避免内存泄漏。
高级集成：使用 Emscripten 和 glue code
手动处理内存和类型转换繁琐易错。Emscripten 提供自动化支持，生成 JavaScript “胶水代码”封装 Wasm 模块，提供更自然的调用接口。
示例：编译 C 代码生成 .js + .wasm
emcc compute.c -o compute.js -s EXPORT_NAME='createComputeModule'
在网页中使用：
createComputeModule().then(module => {
const result = module._compute_heavy_task(1000);
console.log(result);
});
胶水代码自动处理内存初始化、函数映射、异步加载等细节，大幅提升开发效率。
双向调用：Wasm 调用 JavaScript 函数
除了 JS 调用 Wasm，也可以让 Wasm 主动调用 JS 函数，实现回调、日志输出或访问 Web API。
在 Emscripten 中使用 EMSCRIPTEN_KEEPALIVE 和 emscripten_run_script 等宏，或通过 import mechanism 显式导入 JS 函数。
C 代码中调用 JS：
#include <emscripten.h>
EMSCRIPTEN_KEEPALIVE
void log_from_wasm(const char* msg) {
emscripten_run_script_variadic("console.log('From Wasm:', %s)", msg);
}
这使得 Wasm 模块能灵活响应运行时事件，增强交互能力。
基本上就这些。JavaScript 与 WebAssembly 的集成打开了高性能 Web 应用的大门。掌握加载机制、内存共享、工具链协作和双向通信，就能在实际项目中合理分配任务，充分发挥各自优势。
