WebAssembly是一种可以在浏览器中运行的二进制指令格式，能够让C++这类编译型语言编写的代码在网页环境里获得接近原生的执行性能，适合处理音视频编解码、复杂计算、游戏逻辑等场景。很多开发者希望将已有的C++项目迁移到浏览器端，或者开发新的高性能网页应用，就需要掌握C++编译为WebAssembly的方法。
环境准备
编译C++为WebAssembly需要依赖Emscripten工具链，这是目前最主流的编译方案，它可以将C++代码转换为WASM二进制文件和对应的JavaScript胶水代码。首先需要安装Emscripten，不同系统的安装方式略有差异：
- Windows系统：可以通过emsdk的官方安装包完成部署，按照官方文档的步骤下载解压后配置环境变量即可。
- macOS和Linux系统：可以直接通过包管理器或者源码编译的方式安装，安装完成后需要执行
source ./emsdk_env.sh来激活环境。
安装完成后可以在终端执行emcc --version命令验证是否安装成功，如果返回对应的版本信息说明环境配置完成。
编写C++示例代码
我们先编写一个简单的C++函数作为编译示例，这个函数实现两个整数的加法运算，后续会将其编译为WASM并在浏览器中调用。
// 加法函数，会被导出到WASM模块中
extern "C" {
// 使用extern "C"避免C++的名称修饰，方便后续在JS中调用
int add(int a, int b) {
return a + b;
}
}
这里需要注意，如果要让函数可以被外部调用，最好加上extern "C"声明，否则C++编译器会对函数名进行修饰，导致后续在JavaScript中无法正确匹配函数名。
编译C++代码为WebAssembly
使用Emscripten的emcc命令进行编译，基础编译命令如下：
emcc add.cpp -o add.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'
命令参数说明：
-o add.js：指定输出的JavaScript胶水代码文件名，同时会自动生成同名的add.wasm二进制文件。-s WASM=1：明确指定生成WebAssembly格式，而不是旧的asm.js格式。-s EXPORTED_FUNCTIONS='["_add"]'：指定要导出的函数列表，注意函数名前面需要加下划线，对应我们之前写的add函数。-s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'：导出Emscripten的运行时方法，方便后续在JS中调用C++函数。
编译完成后会生成add.js和add.wasm两个文件，前者是加载WASM模块的胶水代码，后者是编译后的二进制模块。
在浏览器中加载并调用WASM模块
接下来编写HTML文件，加载编译生成的文件并调用导出的add函数，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>C++ WASM示例</title>
</head>
<body>
<div id="result"></div>
<script>
// 加载胶水代码，会自动处理WASM模块的加载
var Module = {};
Module.onRuntimeInitialized = function() {
// 方式1：使用cwrap包装函数，调用更方便
var addFunc = Module.cwrap('add', 'number', ['number', 'number']);
var result1 = addFunc(3, 5);
// 方式2：使用ccall直接调用
var result2 = Module.ccall('add', 'number', ['number', 'number'], [10, 20]);
document.getElementById('result').innerText = '3+5=' + result1 + '，10+20=' + result2;
};
</script>
<script src="add.js"></script>
</body>
</html>
将上述HTML文件和之前编译生成的add.js、add.wasm放在同一个目录下，然后通过本地服务器（比如使用python -m http.server启动）访问该HTML文件，不要直接双击打开，否则会因为跨域问题导致WASM模块加载失败。页面加载完成后会显示计算结果，说明C++代码已经成功在浏览器中运行。
常见问题与优化建议
函数导出失败问题
如果调用时出现函数不存在的错误，首先检查EXPORTED_FUNCTIONS参数中的函数名是否正确，是否加了下划线，同时确认C++代码中是否有extern "C"声明。如果函数有参数或者返回值是指针、字符串等复杂类型，还需要额外配置对应的类型映射规则。
性能优化方向
如果C++代码有复杂的计算逻辑，可以在编译时添加优化参数，比如-O3开启最高级别的编译优化，减少生成的WASM模块体积，提升执行速度。另外尽量避免在C++和JavaScript之间频繁传递大量数据，因为数据转换会有一定的性能开销，可以考虑一次性传递批量数据再在C++内部处理。
调试方法
编译时可以添加-g参数生成调试信息，同时配合浏览器的开发者工具中的WASM调试功能，可以断点调试C++源码。如果需要在C++中输出日志，可以使用printf函数，日志会输出到浏览器的控制台中。
WebAssemblyC++Emscripten浏览器高性能前端性能优化修改时间：2026-07-02 19:36:36