使用WebAssembly可在浏览器运行C++代码。先安装Emscripten工具链，编写含EMSCRIPTEN_KEEPALIVE的C++函数并用emcc编译为WASM，生成.js胶水文件和.wasm二进制文件，再通过HTML加载output.js，利用Module.ccall或cwrap调用导出函数，需启动本地服务器查看结果。
要在浏览器中运行 C++ 代码，可以使用 WebAssembly（简称 WASM）。WebAssembly 是一种低级字节码格式，能让 C++、Rust 等语言编写的代码在现代浏览器中高效运行。下面介绍如何将 C++ 代码编译为 WebAssembly 并在网页中调用。
1. 安装 Emscripten 工具链
要将 C++ 编译为 WASM，需要使用 Emscripten，它是一个完整的工具链，基于 LLVM，能将 C/C++ 转为 WebAssembly。
安装步骤如下：
- 克隆 Emscripten 仓库：git clone https://github.com/emscripten-core/emsdk.git
- 进入目录并安装：cd emsdk && ./emsdk install latest && ./emsdk activate latest
- 激活环境变量：source ./emsdk_env.sh（Linux/macOS）或运行 emsdk_env.bat（Windows）
完成安装后，emcc 命令即可使用。
立即学习“C++免费学习笔记（深入）”；
2. 编写简单的 C++ 代码
创建一个名为 hello.cpp 的文件：
#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++!" << std::endl;
return 0;
}
说明：
- extern "C" 防止 C++ 名称修饰，便于 JavaScript 调用。
- EMSCRIPTEN_KEEPALIVE 确保函数不会被编译器优化掉。
- 函数 add 可被 JS 调用。
3. 使用 emcc 编译为 WASM
运行以下命令进行编译：
emcc hello.cpp -o output.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'
参数说明：
- -s WASM=1：生成 .wasm 文件。
- EXPORTED_FUNCTIONS：导出 C++ 函数（注意函数名前加下划线 _add）。
- EXPORTED_RUNTIME_METHODS：导出 JS 调用辅助方法如 ccall 和 cwrap。
编译成功后会生成：
- output.wasm：WebAssembly 二进制文件。
- output.js：胶水代码，负责加载和运行 WASM。
- output.html（可选）：可添加 -s SINGLE_FILE 或直接生成测试页面。
4. 在网页中调用 C++ 函数
创建一个 index.html 文件：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>C++ in Browser</title>
</head>
<body>
<script src="output.js"></script>
<script>
Module.onRuntimeInitialized = function() {
// 使用 ccall 调用 C++ 函数
const result = Module.ccall('add', 'number', ['number', 'number'], [5, 7]);
console.log('5 + 7 =', result); // 输出: 12
// 或使用 cwrap 创建函数包装
const addFunc = Module.cwrap('add', 'number', ['number', 'number']);
console.log('addFunc(3, 4) =', addFunc(3, 4)); // 输出: 7
};
</script>
</body>
</html>
启动本地服务器打开该页面（不能直接双击 HTML 文件）：
python -m http.server 8000然后访问 http://localhost:8000 查看效果。
5. 高级功能与优化
- 使用 -O2 或 -O3 优化编译性能：emcc hello.cpp -O2 -o output.js -s WASM=1 ...
- 若需支持文件系统，可启用 -s FORCE_FILESYSTEM=1。
- 使用 embind 绑定 C++ 类到 JavaScript。
- 使用 WebAssembly.instantiateStreaming 手动控制加载流程（高级场景）。
基本上就这些。通过 Emscripten，你可以把性能敏感的 C++ 逻辑（如图像处理、游戏引擎、音视频编码）迁移到网页端运行，同时保持接近原生的速度。不复杂但容易忽略的是函数导出和命名修饰问题，记得加 EMSCRIPTEN_KEEPALIVE 和下划线。
