JavaScript 的性能在过去十年有了巨大提升（V8、JIT 编译），但在某些场景下——图像/视频处理、加密运算、物理引擎——它仍然无法与原生代码匹敌。WebAssembly（WASM）就是为了解决这个瓶颈而生的。

WebAssembly 是什么

WASM 是一种可在浏览器中运行的低级字节码格式。它不是用来替代 JavaScript 的，而是与 JS 配合——JS 负责 UI 和业务逻辑，WASM 负责计算密集型任务。

WASM 的关键特性：接近原生性能（通常比 JS 快 1.5-10 倍）、多语言支持（Rust/C/C++/Go/AssemblyScript）、安全沙箱运行、与 JS 内存共享不必序列化数据。

从 Rust 编译到 WASM

Rust 是 WASM 最流行的源语言，因为有 wasm-pack 工具链支持：

1
2
cargo install wasm-pack
wasm-pack build --target web

编译后产出一个 .wasm 文件和 JS 胶水代码。在 HTML 中加载：

1
2
3
4
5
import init, { process_image } from './pkg/image_processor.js';
async function run() {
  await init();
  const result = process_image(imageData);
}

典型应用场景

  • 图像/视频处理：滤镜、裁剪、压缩——WASM 版比纯 JS 版快 3-10 倍
  • 加密/解密：AES、SHA 等计算密集型运算
  • 游戏引擎：Unity/Unreal 已支持导出为 WASM
  • 数据可视化：大规模数据集的前端计算
  • 编译器/解释器：在浏览器中运行 Python、SQL 等
  • CAD/3D 渲染：Figma 的核心渲染引擎就是用 WASM

WASM 性能基准

以图像灰度化处理为例（1920x1080 像素）：纯 JS 约 45ms、JS + TypedArray 优化约 18ms、WASM（Rust）约 6ms。

但并非所有场景都适合 WASM。频繁的 JS-WASM 调用有开销，大量数据传输也需要序列化成本。WASM 最适合的是少量调用但每次调用内部做大量计算的场景。

总结

WASM 打破了浏览器只能运行 JavaScript 的限制。它不是 JS 的替代品，而是 JS 的高性能搭档。当你遇到前端性能瓶颈时——考虑一下把最耗时的计算部分用 Rust 写成 WASM 模块，收益可能远超你的预期。