直接编译C++为WebAssembly可获接近原生性能，关键在于选准密集计算任务、正确导出函数、配置内存与前端协作。
直接把 C++ 代码编译成 WebAssembly，就能在网页里跑出接近原生的计算性能。关键不是“能不能”，而是选对模块、导出函数、配好内存，再和前端顺畅协作。
选准适合迁移到 WebAssembly 的计算任务
不是所有逻辑都值得上 Wasm。优先考虑那些 JavaScript 做起来吃力、但 C++ 天然擅长的部分：
- 密集数值运算（比如矩阵乘法、FFT 变换、物理仿真）
- 图像/音视频处理（卷积滤波、YUV 转换、编解码预处理）
- 加密解密（AES、SHA、RSA 运算）
- 科学计算或游戏逻辑中固定结构的循环计算
这类任务通常有明确输入输出、无副作用、不依赖操作系统 API，迁移成本低、收益高。
用 Emscripten 编译 C++ 到 WebAssembly
核心是让 C++ 函数能被 JavaScript 调用。以一个加法函数为例：
立即学习“C++免费学习笔记（深入）”；
#include <emscripten.h>
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) { return a + b; }
C++ Code Review Master
下载
组合式C++代码评审方案，融合静态分析、AI推理、多轮迭代评审和C++专项检查，适用于PR审查、增量代码审查、全项目评审和代码质量评分，触发词包括review cpp、cpp代码评审、C++review、代码审查。
编译命令要导出该函数，并启用关键选项：
- -s EXPORTED_FUNCTIONS='["_add"]'：注意函数名前加下划线，且必须用双引号包裹数组
- -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'：方便 JS 端调用
- -s ALLOW_MEMORY_GROWTH=1：应对不确定数据量，避免内存溢出
- -O3 -s WASM=1：开启最高优化并生成 wasm 格式
执行：emcc math.cpp -o math.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall"]' -O3 -s WASM=1 -s ALLOW_MEMORY_GROWTH=1
在前端安全高效地调用和传参
加载生成的 math.js 后，不能直接等模块就绪就调用，得等运行时初始化完成：
<script src="math.js"></script><br>
<script><br>
Module.onRuntimeInitialized = () => {<br>
const result = Module.ccall('add', 'number', ['number', 'number'], [5, 3]);<br>
console.log(result); // 输出 8<br>
};<br>
</script>
处理复杂数据（如数组）时，需手动管理内存：
- 用
Module._malloc在 Wasm 线性内存中申请空间 - 用
Module.HEAPF32.set或HEAPU8.set写入 JS 数据 - 将内存地址传给 C++ 函数，处理完再读回结果
- 最后调用
Module._free释放，避免内存泄漏
性能再挖潜的几个实操要点
真正拉开性能差距的，往往在细节配置：
-
启用 SIMD：加
-msimd128编译参数，配合<wasm_simd128.h>手动向量化图像或音频处理循环 - 预分配内存池：对高频小块内存申请（如每帧像素缓冲），提前 malloc 一块大内存复用，减少 runtime 开销
-
关闭异常与 RTTI：加
-fno-exceptions -fno-rtti，减小体积、提升启动速度 -
使用 cwrap 替代 ccall：对反复调用的函数，先
cwrap一次生成 JS 封装函数，后续直接调用，省去每次解析开销
