WebAssembly 与 JavaScript：将代码提速 10 倍的二重奏

为什么浏览器突然开始说一种新语言？

想象一下，你是一位主厨。JavaScript 是你的万能刀：可以用它切面包、清理鱼，甚至开罐头（有割伤的风险）。而 WebAssembly 是一把专业的日本刀，用来切生鱼片。它只做一件事——切得完美薄且快，但需要特殊的方法。你不会用它削土豆，但当需要在一分钟内切 100 份金枪鱼时，没有它可不行。

在 Web 开发的世界里，长期以来只有一个王者——JavaScript。但在 2017 年，一位新玩家登上了舞台：WebAssembly (Wasm)。它不是 JS 的替代品，而是其强大的搭档。今天我们来搞清楚这是什么，为什么需要它，以及如何用 JavaScript 驾驭它。

用简单的话说，什么是 WebAssembly？

WebAssembly 是一种低级二进制指令格式，在浏览器中以接近原生的速度执行。如果说 JavaScript 是浏览器实时读取和解释的文本，那么 Wasm 就是类似于机器码的、已编译好的字节码。

你用 C、C++ 或 Rust 编写代码，将其编译成 .wasm 文件，然后像普通脚本一样加载到浏览器中。浏览器直接执行它，跳过了 JavaScript 需要经历的漫长解析和 JIT 编译阶段。

WebAssembly 的关键特性：

• 速度——执行接近原生（在计算密集型任务中比 JS 快 2–10 倍）。
• 安全性——在隔离的沙箱中运行，和 JS 一样。
• 紧凑性——.wasm 文件占用空间小，加载速度快。
• 集成性——可以轻松地从 JavaScript 调用，反之亦然。

既然有 JavaScript，为什么还需要它？

JavaScript 在 95% 的任务中表现出色：操作 DOM、动画、事件处理、服务器请求。但有些任务 JS 力不从心：

• 重型计算——视频处理、3D 渲染、物理模拟。
• 游戏——基于 Unity 或 Unreal Engine 的 AAA 级项目。
• 科学计算——分子动力学模拟、密码学。
• 媒体处理——图像压缩/解压、音频和视频编解码器。

在这些场景中，WebAssembly 能带来数十倍的性能提升。同时，你仍然可以通过 JS 封装层访问浏览器 API。

它是如何工作的？简单的架构

想象一座连接两个世界的桥梁。一边是你的 .wasm 模块（快速但“笨”——它不了解 DOM 和事件）。另一边是 JavaScript（较慢但“聪明”——它什么都能做）。它们通过一种特殊的“内存”——Wasm 线性内存进行通信。

JS 分配一个字节数组（ArrayBuffer），将其传递给 Wasm 模块，模块填充数据，然后 JS 取回结果。这就像通过窗户传递一个沉重的盒子——你不是逐个传递每个物品，而是直接传递整个盒子。

编写一个实际示例：加速阶乘计算

让我们在经典任务——计算阶乘上比较性能。首先用纯 JavaScript 实现，然后用 C 实现并编译成 Wasm。

1. JavaScript 版本（常规）

// factorial.jsfunction factorialJS(n) {    let result = 1;    for (let i = 2; i <= n; i++) {        result *= i;    }    return result;}

// 测试console.time('JS');for (let i = 0; i < 100000; i++) {    factorialJS(20);}console.timeEnd('JS'); // 在 Chrome 中约 15-25 毫秒

2. 我们将编译成 Wasm 的 C 代码

首先用 C 编写：

// factorial.cint factorial(int n) {    int result = 1;    for (int i = 2; i <= n; i++) {        result *= i;    }    return result;}