登录WebAssembly：前端界的“外挂”，让C++代码在浏览器里跑起来
你的网页有个计算密集的任务（比如视频转码、图像滤镜、物理模拟），用JS写慢得像乌龟。你想：“要是能用C++写，然后在浏览器里跑就好了。” 今天的主角 WebAssembly 就是干这个的——它让你把C++、Rust等语言编译成一种近乎二进制的格式（.wasm），让浏览器以接近原生的速度执行。前端从此不只是JS的天下。
前言
JS 是解释型语言，哪怕 V8 再快，在处理大量计算时还是力不从心。而 WebAssembly（简称 Wasm）是一种低级的汇编式语言，浏览器可以极快地解析和执行。它不是要取代 JS，而是作为 JS 的“高性能搭档”：你用 JS 写业务逻辑，用 Wasm 写计算密集型模块。
今天我们就从零了解 Wasm：它是什么鬼？怎么用？性能真的翻倍吗？以及一个最经典的例子——用 C++ 写一个斐波那契数列，编译成 Wasm，然后在浏览器里调用。
一、WebAssembly 到底是什么？
你可以把它理解为一种中间码。你用 C++、Rust、Go 等语言写代码，然后编译成 .wasm 文件。浏览器下载这个文件，实例化后，JS 就可以调用其中的函数。
它和 JS 的区别：
- JS：文本格式，需要解析、JIT 编译，性能好但不够稳定。
- Wasm：二进制格式，体积小，解码快，执行效率接近原生（比 JS 快 1-10 倍，视任务而定）。
注意：Wasm 不能直接操作 DOM、调用浏览器 API，它只能做纯计算。它需要通过 JS 来输入数据、接收结果，并让 JS 更新界面。
二、为什么需要 Wasm？一个例子让你秒懂
假设你要对一张 4K 图片做高斯模糊。纯 JS 实现，需要遍历每个像素，三层循环，可能卡死浏览器。用 C++ 写同样的算法，编译成 Wasm，速度可能提升 5-10 倍。这就是 Wasm 的价值：把计算密集型任务交给“专业选手”。
适用场景：
- 视频/音频编解码
- 图像处理（滤镜、识别）
- 物理模拟（游戏、数据可视化）
- 加密算法
- 大型数学计算（如金融建模）
三、上手：把 C++ 编译成 Wasm
我们需要一个工具链：Emscripten。它能把 C/C++ 编译成 Wasm，并生成 JS 胶水代码。
1. 安装 Emscripten
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh # 设置环境变量
2. 写一个简单的 C++ 函数
add.cpp:
#include <emscripten.h>
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}
EMSCRIPTEN_KEEPALIVE 告诉编译器不要优化掉这个函数（否则会被 tree-shaking 移除）。
3. 编译成 Wasm
emcc add.cpp -o add.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["cwrap"]'
参数解释：
-
-o add.js：输出 JS 和 Wasm 文件。 -
-s WASM=1：生成 Wasm。 -
-s EXPORTED_FUNCTIONS：指定要导出的 C 函数（注意前缀下划线）。 -
-s EXPORTED_RUNTIME_METHODS='["cwrap"]'：导出cwrap工具函数（方便包装）。
输出：add.js 和 add.wasm。
4. 在 HTML 中调用
<script src="add.js"></script>
<script>
Module.onRuntimeInitialized = () => {
const add = Module.cwrap('add', 'number', ['number', 'number']);
console.log(add(2, 3)); // 5
};
</script>
注意：必须等待 Module.onRuntimeInitialized，因为 Wasm 是异步加载的。
四、性能实测：斐波那契递归
C++ 版（递归，效率低，放大差距）:
#include <emscripten.h>
EMSCRIPTEN_KEEPALIVE
int fib(int n) {
if (n <= 1) return n;
return fib(n-1) + fib(n-2);
}
编译后用 JS 实现相同递归。测试 n=45：
- JS: ~8 秒
- Wasm: ~3 秒
提升明显。对于非递归计算（循环），差距可能缩小，但 Wasm 依然有优势。
五、在 Rust 中写 Wasm（更现代的选择）
Rust 对 Wasm 支持极好，工具链更简单。安装 wasm-pack：
cargo install wasm-pack
创建 lib：
// lib.rs
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
构建：
wasm-pack build --target web
会在 pkg 目录生成 JS 和 Wasm。使用：
import init, { add } from './pkg/my_wasm.js';
async function run() {
await init();
console.log(add(2, 3));
}
run();
Rust 方式比 Emscripten 更现代，体积更小。
六、注意事项和坑
- Wasm 无法直接操作 DOM：你需要把数据计算结果传回 JS，由 JS 更新界面。
- 文件体积：简单 Wasm 可能只有几十 KB，但引入 Emscripten 的 JS 胶水代码可能上百 KB。Rust 的 wasm-bindgen 生成的胶水代码较小。
-
数据传输开销：每次调用 Wasm 函数，需要把参数从 JS 拷贝到 Wasm 线性内存，结果再拷贝回来。对于大量数据（如图像），可以用
Module._malloc和Module.HEAPU8共享内存，避免拷贝。 - 浏览器支持：所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持 Wasm。IE 不支持。
七、实际应用案例
- Figma：用 Wasm 运行 C++ 图形引擎，实现流畅在线设计。
- Google Earth：用 Wasm 跑 C++ 3D 渲染。
- Zoom：网页版使用 Wasm 进行音视频编解码。
- AutoCAD Web：用 Wasm 把桌面端代码搬到浏览器。
八、总结：Wasm 不是银弹，但是一把“瑞士军刀”
- 当你遇到 JS 性能瓶颈时，可以考虑 Wasm。
- 它适合计算密集型，不适合 IO 密集或 DOM 操作。
- C++ 和 Rust 是最常用的两种源语言，推荐 Rust（安全、工具链友好）。
- 学习曲线有，但值得投入。
前端开发的未来是多语言协作：JS 负责交互，Wasm 负责计算。两者取长补短，让你的网页应用飞起来。
