WebAssembly与JavaScript混合编程可提升性能，通过Emscripten将C/C++编译为Wasm执行密集计算，JavaScript处理DOM和事件，二者共享内存并互调函数，发挥各自优势。
WebAssembly（简称Wasm）是一种低级字节码，能够在现代浏览器中以接近原生速度运行。它不是用来取代JavaScript，而是与之互补。在实际开发中，WebAssembly与JavaScript混合编程已成为高性能Web应用的重要手段，尤其适用于计算密集型任务，如图像处理、音视频编码、游戏引擎和科学计算。
为什么需要混合编程？
JavaScript 是 Web 的核心语言，灵活且生态丰富，但在执行密集型运算时性能受限。WebAssembly 通过提前编译为紧凑的二进制格式，在解析和执行上更高效。两者结合可以：
- 用 C/C++/Rust 编写性能关键模块，编译为 Wasm 提升执行速度
- 利用 JavaScript 处理 DOM 操作、事件响应和网络请求等擅长任务
- 实现语言间数据共享与函数互调，发挥各自优势
JavaScript 调用 WebAssembly 函数
最常见的方式是使用 Emscripten 工具链将 C/C++ 代码编译为 .wasm 文件，然后在 JS 中加载并调用。
示例：C 函数导出为 Wasm/* add.c */
extern "C" {
int add(int a, int b) {
return a + b;
}
}
编译命令：emcc add.c -o add.wasm -O3 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["cwrap"]'在 JavaScript 中调用：
const wasmModule = await fetch('add.wasm').then(response =>
WebAssembly.instantiateStreaming(response)
);
<p>const addFunc = wasmModule.instance.exports._add;
console.log(addFunc(2, 3)); // 输出 5
WebAssembly 调用 JavaScript 函数
Wasm 可以导入并调用 JS 提供的函数，常用于回调、打印日志或访问浏览器 API。
立即学习“Java免费学习笔记（深入）”；
// C 代码中声明外部函数
extern void js_print(int value);
<p>int compute_and_log() {
int result = 42;
js_print(result); // 调用 JS 函数
return result;
}
JS 加载时提供导入对象：const importObject = {
env: {
js_print: (value) => console.log("From Wasm:", value)
}
};
<p>await WebAssembly.instantiateStreaming(fetch('compute.wasm'), importObject);
内存与数据传递注意事项
WebAssembly 和 JavaScript 共享线性内存，但数据类型不同，需手动管理内存布局。
- Wasm 使用线性内存（Linear Memory），本质是一块 ArrayBuffer
- 字符串、数组等复合数据需在 JS 和 Wasm 间复制或视图共享
- 常用方法：通过 Memory.grow() 扩展内存，使用 Uint8Array 或 DataView 访问内容
// 假设 Wasm 导出 memory
const memory = wasmInstance.exports.memory;
const heap = new Uint8Array(memory.buffer);
<p>function writeStringToWasm(str, offset) {
const bytes = new TextEncoder().encode(str);
heap.set(bytes, offset);
}</p><p>// 在 JS 中准备数据，Wasm 从指定地址读取
writeStringToWasm("hello", 1024);
wasmInstance.exports.process_string(1024);
工具与开发建议
直接操作 Wasm 字节码复杂，推荐使用高层工具简化开发：
- Emscripten：成熟的 C/C++ 到 Wasm 编译器，支持自动 glue 代码生成
- AssemblyScript：TypeScript 风格语法，专为 Wasm 设计，与 JS 交互更自然
- WASI：允许 Wasm 在非浏览器环境运行，扩展系统调用能力
开发时注意：
- 避免频繁跨边界传大数据，减少序列化开销
- 合理设计接口边界，把大块逻辑留在 Wasm 内部执行
- 使用 Release 模式编译，开启优化（如 -O3）
基本上就这些。WebAssembly 不是为了替代 JavaScript，而是作为它的“性能搭档”。在合适的场景下混合使用，能让 Web 应用兼具高效率和灵活性。掌握基本的数据交互和函数调用机制后，集成过程并不复杂，但容易忽略内存管理细节。
