使用Emscripten可将C++编译为WebAssembly以提升前端性能。首先安装Emscripten工具链并配置环境，接着编写含EMSCRIPTEN_KEEPALIVE修饰的C++代码，通过emcc命令导出函数并生成.wasm、.js和.html文件，最后用emrun运行或嵌入自定义HTML，通过Module对象在JS中调用C++函数，支持内存扩展、文件系统等高级功能，适用于计算密集型任务。
将C++代码编译成WebAssembly（WASM）并在浏览器中运行，可以显著提升前端性能，尤其适合计算密集型任务。实现这一目标最常用、最成熟的工具是Emscripten。下面是一个清晰的教程，带你从零开始完成C++到WASM的编译与部署。
1. 安装Emscripten编译工具链
Emscripten 是一个完整的LLVM+Clang+Binaryen工具链，能将C/C++编译为WebAssembly。
- 克隆Emscripten仓库：
git clone https://github.com/emscripten-core/emsdk.git - 进入目录并安装最新SDK：
cd emsdk
./emsdk install latest
./emsdk activate latest - 设置环境变量：
source ./emsdk_env.sh（Linux/macOS）或运行emsdk_env.bat（Windows）
完成后，emcc 命令即可在终端使用。
2. 编写简单的C++程序
创建一个名为 hello.cpp 的文件：
立即学习“C++免费学习笔记（深入）”；
#include <emscripten.h>
#include <iostream>
extern "C" {
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}
}
int main() {
std::cout << "Hello from C++!\n";
return 0;
}
EMSCRIPTEN_KEEPALIVE 确保函数不会被编译器优化掉，方便JS调用。
3. 编译为WebAssembly
使用emcc命令编译：
emcc hello.cpp -o hello.html -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s EXPORTED_FUNCTIONS='["_main", "_add"]' --emrun关键参数说明：
- -s WASM=1：启用WebAssembly输出
- -s ALLOW_MEMORY_GROWTH=1：允许堆内存动态增长
- EXPORTED_FUNCTIONS：导出C++函数供JS调用（注意函数名前加_）
- --emrun：生成可直接运行的HTML用于测试
编译后会生成：hello.wasm、hello.js、hello.html。
4. 在浏览器中运行
方式一：直接运行生成的HTML
emrun hello.html这会启动本地服务器并在浏览器打开页面，控制台输出“Hello from C++!”。
方式二：自定义HTML页面集成
创建自己的 index.html，加载生成的JS胶水代码：
<script src="hello.js"></script>
<script>
Module.onRuntimeInitialized = function() {
console.log(Module._add(5, 7)); // 输出 12
};
</script>
通过 Module._函数名() 调用C++导出函数。
5. 高级功能支持
若需使用标准库、文件系统或异步操作：
- -s STANDALONE_WASM：生成独立WASM模块
- -s FORCE_FILESYSTEM=1：启用虚拟文件系统
- -s ASYNCIFY：支持C++中使用async/await
- --bind：结合WebIDL Binder支持C++类绑定到JavaScript
基本上就这些。掌握Emscripten后，你可以将图像处理、音视频编码、游戏逻辑等高性能C++模块无缝集成到网页应用中。整个过程不复杂但容易忽略细节，比如函数导出和命名修饰问题。建议从简单函数开始，逐步增加复杂度。
