使用Emscripten将C++编译为WebAssembly，可在浏览器中高效运行计算密集型任务。1. 安装Emscripten工具链并配置环境；2. 编写C++代码（如add.cpp），通过emcc编译生成.wasm和.js文件，导出函数供JS调用；3. 在HTML中引入胶水代码，利用ccall/cwrap调用WASM函数；4. 处理复杂数据时手动管理内存，使用_malloc/HEAPU8/_free传递数组或字符串；5. 通过-O3优化、减少JS-WASM交互提升性能，实现接近原生的执行效率。
在现代Web开发中，让C++代码在浏览器中运行已成为可能，主要依赖于WebAssembly（WASM）。通过将C++编译为WASM，可以在浏览器中高效执行计算密集型任务，比如图像处理、音视频编码、游戏逻辑或科学计算。下面介绍如何使用C++结合WebAssembly，在浏览器中运行高性能代码。
1. 准备工具：安装Emscripten
要将C++编译为WebAssembly，最常用的工具是 Emscripten，它是一个完整的编译工具链，基于LLVM，可将C/C++代码编译成WASM，并生成配套的JavaScript胶水代码以便在浏览器中调用。
安装步骤如下：
- 克隆Emscripten SDK：
- 进入目录并安装最新版本：
./emsdk install latest
./emsdk activate latest
- 激活环境变量（Linux/macOS）：
Windows用户可运行 emsdk_env.bat 来设置环境。
立即学习“C++免费学习笔记（深入）”；
2. 编写C++代码并编译为WASM
创建一个简单的C++文件，例如 add.cpp：
#include <emscripten.h>extern "C" {
int add(int a, int b) {
return a + b;
}
}
使用 emcc 命令编译为WASM：
emcc add.cpp -o add.wasm -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -s WASM=1说明：
- -s WASM=1：确保输出WASM文件（默认已启用）
- EXPORTED_FUNCTIONS：指定要暴露给JavaScript的函数（注意函数名前加下划线 _）
- EXPORTED_RUNTIME_METHODS：允许JavaScript使用 ccall/cwrap 调用C函数
编译后会生成：add.wasm、add.js（胶水代码）
3. 在HTML和JavaScript中调用WASM函数
创建一个简单的HTML页面加载并使用WASM模块：
<!DOCTYPE html><html>
<head><title>WASM Test</title></head>
<body>
<script src="add.js"></script>
<script>
Module.onRuntimeInitialized = function() {
const result = Module.ccall('add', 'number', ['number', 'number'], [5, 7]);
console.log('Result:', result); // 输出: 12
}
</script>
</body>
</html>
也可以使用 cwrap 创建函数包装器，便于多次调用：
const addFunc = Module.cwrap('add', 'number', ['number', 'number']);console.log(addFunc(3, 4)); // 7
4. 处理复杂数据与性能优化建议
对于更复杂的场景，如传递数组或字符串，需注意内存管理：
- 使用 Module._malloc 分配内存，Module.HEAPU8 等堆视图写入数据
- 函数参数若为指针，应传入内存地址
- 用完后调用 Module._free 释放内存
示例：传递数组
const arr = new Uint8Array([1, 2, 3, 4]);const ptr = Module._malloc(arr.length);
Module.HEAPU8.set(arr, ptr);
const sum = Module.ccall('sum_array', 'number', ['number', 'number'], [ptr, arr.length]);
Module._free(ptr);
性能提示：
- 避免频繁的JS与WASM间数据传递
- 尽量在WASM内部完成大批量计算
- 使用 -O3 优化编译（如 emcc -O3）提升运行效率
基本上就这些。通过Emscripten将C++编译为WASM，可以显著提升Web应用的计算性能。虽然需要适应内存模型和接口封装，但一旦掌握，就能在浏览器中运行接近原生速度的代码。
