WebAssembly（Wasm）
面试速答（30 秒版 TL;DR）
- WebAssembly（Wasm） 是一种可移植的二进制指令格式，目标是让浏览器能高效执行非 JavaScript 语言编译出来的代码。
- 它不是用来“替代 JavaScript 写页面”，而是用来补强 Web 在高性能计算、音视频处理、图形、游戏、编译器、加密等场景的能力。
- Wasm 通常和 JavaScript 协同工作：计算密集部分交给 Wasm，页面交互和 DOM 仍主要由 JS 负责。
- 一句话记忆：Wasm 把浏览器从“只能高效跑 JS”扩展成“能高效跑多语言编译产物”。
为什么需要 Wasm
JavaScript 很灵活，但有天然边界：
- 数值密集计算场景开销大
- 大型现有 C/C++/Rust 代码库难直接迁移到 Web
- 一些底层算法或多媒体处理对性能要求更高
Wasm 的目标就是：
- 让这些能力可以进浏览器
- 保持安全沙箱
- 保持可移植和可下载
Wasm 的基本工作模型
Wasm 不是在解决什么
先把边界说清楚，面试里很加分。
Wasm 不是为了：
- 取代前端框架
- 直接方便地操作 DOM
- 把所有业务逻辑都搬进去
因为：
- DOM 交互仍更适合 JavaScript
- Wasm 和 JS 之间的跨边界调用也有成本
所以真实实践通常是：
把热点计算放进 Wasm，把页面组织和交互留给 JS。
Wasm 的核心特点
1. 二进制格式，体积和解析更友好
相较于直接把大型逻辑以 JS 源码形式下发，Wasm 的二进制格式在下载、解析、校验上更适合高性能执行。
2. 沙箱化执行
Wasm 运行在浏览器安全模型内，不会像本地程序一样随意访问操作系统资源。
3. 多语言接入
常见语言包括：
- C
- C++
- Rust
- Go（通常会有额外运行时权衡）
一个最小调用示意
const response = await fetch('/add.wasm');
const bytes = await response.arrayBuffer();
const {instance} = await WebAssembly.instantiate(bytes);
console.log(instance.exports.add(1, 2)); // 3
这个例子说明：
- 浏览器可以直接加载
.wasm - 实例化后通过
exports调用导出函数
Wasm 适合哪些场景
1. 音视频编解码
例如：
- ffmpeg 类能力搬到浏览器侧
- 实时转码、剪辑、滤镜
2. 图像处理与图形计算
- 大图处理
- CAD、地图、建模
- 游戏引擎能力迁移
3. 编译器与解释器
- 在线 IDE
- SQL 引擎
- Markdown / 代码分析器
4. 密码学与科学计算
- 加解密
- 压缩解压
- 数值密集算法
Wasm 的限制与成本
1. DOM 操作不擅长
Wasm 不像 JS 那样天然适合直接做页面交互。
2. 跨边界调用有成本
JS 调 Wasm、Wasm 回 JS 都不是零成本。如果逻辑非常细碎，性能收益可能被调用开销抵消。
3. 包体和工具链复杂度
引入 Wasm 往往意味着：
- 更复杂的编译流程
- 更高的调试门槛
- 更复杂的部署与缓存策略
与 JavaScript 的关系
一个非常稳妥的面试回答是：
| 维度 | JavaScript | Wasm |
|---|---|---|
| 主要职责 | 页面交互、业务逻辑、DOM | 计算密集型逻辑 |
| 开发生态 | 前端最成熟 | 偏专项、偏性能 |
| 与浏览器 API 协作 | 强 | 通常需经 JS 桥接 |
所以 Wasm 更像：
- JS 的性能补充件
而不是：
- 前端主业务代码的完全替代物
典型题 & 标准答法
Q1：WebAssembly 是什么？
答：WebAssembly 是一种面向栈机的二进制指令格式，目的是让浏览器能够高效运行由 C/C++/Rust 等语言编译得到的代码。它主要用于高性能计算场景，通常与 JavaScript 协同工作，而不是替代 JavaScript 做页面开发。
Q2：Wasm 和 JavaScript 的关系是什么？
答：JavaScript 仍然负责页面交互、DOM 和大部分业务组织；Wasm 更适合承担热点计算、音视频处理、图形和编译器等高性能任务。二者通常是协作关系，不是简单替代关系。
Q3：是不是引入 Wasm 页面就一定更快？
答：不一定。只有当场景确实是计算密集型、并且跨 JS/Wasm 边界调用成本可控时，Wasm 才明显有价值。如果只是普通页面逻辑，引入 Wasm 可能增加复杂度而收益有限。
常见追问
- Wasm 为什么不直接操作 DOM？
- Wasm 和 Worker、WebGL 能怎么组合？
- Rust 做 Wasm 为什么很常见？
易错点
- 不要说“Wasm 比 JS 快，所以应该全站用 Wasm”。这是典型误区。
- 不要忽略工程成本，尤其是调试、构建、缓存和跨边界调用。
- 不要把 Wasm 说成“浏览器原生代码”。它仍运行在浏览器安全沙箱中。
速记要点
- Wasm 解决的是 Web 高性能计算能力扩展。
- Wasm 常与 JS 协作，不替代 DOM 交互层。
- 适合计算密集型，不适合所有业务逻辑。