WebAssembly 入门：在浏览器中运行 C++ 代码
WebAssembly 入门：在浏览器中运行 C++ 代码
WebAssembly 简介
WebAssembly（Wasm） 是一种为 Web 设计的二进制指令格式，它允许将编译后的代码在 Web 浏览器中高效运行。与 JavaScript 不同，Wasm 可以提供接近原生性能的执行能力，特别适合计算密集型任务。
Wasm 的优势：
- 代码压缩效率高
—
开发环境搭建
1. 安装工具链
bash
使用 Emscripten 工具链
克隆 emsdk 仓库
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
安装最新版
./emsdk install latest
激活最新版
./emsdk activate latest
设置环境变量
source ./emsdk_env.sh
2. 验证安装
bash
检查 emcc 编译器
emcc --version
应该输出类似：
emcc (Emscripten gcc-like compiler) 3.1.45
—
第一个 C++ 程序
1. 简单的 C++ 代码
cpp
// fibonacci.cpp
#include
// 计算斐波那契数
int fib(int n) {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
}
// 导出函数到 JavaScript
// EMSCRIPTEN_KEEPALIVE 宏标记需要导出的函数
EMSCRIPTEN_KEEPALIVE
int fibonacci(int n) {
return fib(n);
}
// 导出多个函数
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}
2. 编译为 WebAssembly
bash
编译 C++ 文件为 Wasm 模块
emcc fibonacci.cpp \
-o fibonacci.js \
-s EXPORTED_FUNCTIONS="['_fibonacci','_add']" \
-s EXPORTED_RUNTIME_METHODS="['ccall','cwrap']" \
-s ALLOW_MEMORY_GROWTH=1
编译后生成两个文件：
- fibonacci.js（JavaScript 胶水代码）
- fibonacci.wasm（WebAssembly 二进制文件）
3. 在 HTML 中使用
html
WebAssembly 示例
WebAssembly 斐波那契计算
---
高级功能：数据类型交互
1. 字符串传递
cpp
// string_example.cpp
#include
#include
extern "C" {
// 处理字符串
EMSCRIPTEN_KEEPALIVE
void process_string(char* str) {
printf("Received string: %s\n", str);
// 在 C++ 中处理字符串
}
// 返回字符串
EMSCRIPTEN_KEEPALIVE
char* get_greeting() {
static char greeting[] = "Hello from C++!";
return greeting;
}
}
编译：
bash
emcc string_example.cpp \
-o string_example.js \
-s EXPORTED_RUNTIME_METHODS="['ccall','cwrap','UTF8ToString','stringToUTF8']"
JavaScript 使用：
javascript
var Module = {
onRuntimeInitialized: function() {
// 传入字符串
var str = "Hello World";
var buffer = Module._malloc(str.length + 1);
Module.stringToUTF8(str, buffer, str.length + 1);
Module.ccall('process_string', null, ['number'], [buffer]);
// 释放内存
Module._free(buffer);
// 接收字符串
var ptr = Module.ccall('get_greeting', 'number', []);
var greeting = Module.UTF8ToString(ptr);
console.log(greeting);
}
};
2. 数组传递
cpp
// array_example.cpp
#include
#include
extern "C" {
// 计算数组和
EMSCRIPTEN_KEEPALIVE
int sum_array(int* arr, int length) {
int sum = 0;
for (int i = 0; i < length; i++) {
sum += arr[i];
}
return sum;
}
// 复制数组
EMSCRIPTEN_KEEPALIVE
void copy_array(int* src, int* dst, int length) {
for (int i = 0; i < length; i++) {
dst[i] = src[i];
}
}
}
JavaScript 使用：
javascript
var Module = {
onRuntimeInitialized: function() {
var arr = [1, 2, 3, 4, 5];
// 分配内存
var size = arr.length * 4; // 每个整数 4 字节
var buffer = Module._malloc(size);
// 复制数组数据
Module.HEAP32.set(arr, buffer / 4);
// 调用 C++ 函数
var sum = Module.ccall('sum_array', 'number', ['number', 'number'],
[buffer, arr.length]);
console.log('Array sum:', sum);
// 释放内存
Module._free(buffer);
}
};
---
性能优化配置
1. 编译优化选项
bash
开发版本（带调试信息）
emcc hello.cpp -o hello.js
优化版本
emcc hello.cpp \
-o hello.js \
-O3 \
-s USE_PTHREADS=1
最小化 Wasm 模块
emcc hello.cpp \
-o hello.js \
-O3 \
-s MODULARIZE=1 \
-s EXPORT_NAME="createModule" \
-s ENVIRONMENT='web' \
--closure 1
2. 内存配置
cpp
// memory_config.cpp
#include
int main() {
// 使用 emscripten_malloc
char* buffer = (char*)emscripten_malloc(1024 * 1024);
// 使用内存
for (int i = 0; i < 1024 * 1024; i++) {
buffer[i] = i % 256;
}
// 释放内存
emscripten_free(buffer);
return 0;
}
编译时设置内存：
bash
emcc memory_config.cpp \
-o memory_config.js \
-s INITIAL_MEMORY=67108864 # 64MB 初始内存
---
性能对比
1. JavaScript vs WebAssembly
cpp
// 密集型计算测试
#include
#include
EMSCRIPTEN_KEEPALIVE
double matrix_multiply(int n) {
double A = (double)malloc(n * sizeof(double*));
double B = (double)malloc(n * sizeof(double*));
double C = (double)malloc(n * sizeof(double*));
for (int i = 0; i < n; i++) {
A[i] = (double*)malloc(n * sizeof(double));
B[i] = (double*)malloc(n * sizeof(double));
C[i] = (double*)malloc(n * sizeof(double));
}
// 初始化矩阵
for (int i = 0; i < n; i++) {
for (int j = 0; j < n; j++) {
A[i][j] = i + j;
B[i][j] = i * j;
}
}
// 矩阵乘法
for (int i = 0; i < n; i++) {
for (int j = 0; j < n; j++) {
C[i][j] = 0;
for (int k = 0; k < n; k++) {
C[i][j] += A[i][k] * B[k][j];
}
}
}
// 释放内存
for (int i = 0; i < n; i++) {
free(A[i]);
free(B[i]);
free(C[i]);
}
free(A);
free(B);
free(C);
return C[n/2][n/2];
}
2. 性能测试结果
3. 内存使用对比
javascript
// JavaScript 版本
console.time('js-calc');
// 计算逻辑...
console.timeEnd('js-calc');
// 内存峰值：~150MB
// WebAssembly 版本
console.time('wasm-calc');
// 调用 Wasm 函数...
console.timeEnd('wasm-calc');
// 内存峰值：~80MB
// 内存节省：47%
---
常见使用场景
1. 图像处理
cpp
// image_process.cpp
#include
EMSCRIPTEN_KEEPALIVE
void grayscale(unsigned char* pixels, int width, int height) {
int length = width * height * 3; // RGB
for (int i = 0; i < length; i += 3) {
int gray = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
pixels[i] = gray;
pixels[i+1] = gray;
pixels[i+2] = gray;
}
}
EMSCRIPTEN_KEEPALIVE
void blur(unsigned char* pixels, int width, int height, int radius) {
// 高斯模糊算法实现
}
2. 游戏开发
cpp
// game_logic.cpp
#include
struct GameState {
int score;
int level;
};
EMSCRIPTEN_KEEPALIVE
void init_game(GameState* state) {
state->score = 0;
state->level = 1;
}
EMSCRIPTEN_KEEPALIVE
void update_game(GameState* state) {
state->score += 10;
if (state->score > 100) {
state->level++;
state->score = 0;
}
}
EMSCRIPTEN_KEEPALIVE
int get_score(GameState* state) {
return state->score;
}
---
调试技巧
1. 启用调试符号
bash
emcc game.cpp \
-o game.js \
-g # 生成调试符号
2. 使用 Chrome DevTools
javascript
// 在浏览器中开启调试
var Module = {
onRuntimeInitialized: function() {
// 设置断点
debugger;
}
};
3. 性能分析
bash
生成性能分析
emcc game.cpp \
-o game.js \
-fprofile-generate
运行测试
node game_test.js
收集数据
emcc game.cpp \
-o game.js \
-fprofile-use
---
总结
WebAssembly 为浏览器带来了接近原生的性能，使得 C++、Rust 等语言编写的代码可以在 Web 环境中高效运行。
关键要点：
- 在计算密集型场景中 Wasm 性能提升显著
通过合理配置和使用 WebAssembly，可以为 Web 应用带来显著的性能提升，特别是在图像处理、游戏引擎、科学计算等领域。
发表评论