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

bash 复制代码

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:

cpp 复制代码

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
  return a + b;
}

EMSCRIPTEN_KEEPALIVE 告诉编译器不要优化掉这个函数（否则会被 tree-shaking 移除）。

3. 编译成 Wasm

bash 复制代码

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 中调用

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++ 版（递归，效率低，放大差距）:

cpp 复制代码

#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：

bash 复制代码

cargo install wasm-pack

创建 lib：

rust 复制代码

// lib.rs
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

构建：

bash 复制代码

wasm-pack build --target web

会在 pkg 目录生成 JS 和 Wasm。使用：

js 复制代码

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 负责计算。两者取长补短，让你的网页应用飞起来。