WebAssembly

定义

核心目标

• 高性能：接近原生代码的执行速度（弥补 JavaScript 的性能瓶颈）。
• 安全性：在浏览器沙箱环境中运行，禁止直接访问内存或系统资源。
• 跨平台：独立于硬件和操作系统，支持所有现代浏览器。
• 语言无关：允许开发者使用 C/C++、Rust、Go 等语言编写代码，并编译为 Wasm。

技术架构与工作原理

二进制格式与文本格式

• 二进制格式（.wasm）：紧凑的二进制编码，减少传输体积，加快加载速度。
• 文本格式（.wat）：人类可读的中间表示（类似汇编），用于调试和手动编码。

执行模型

• 堆栈机模型：Wasm 基于堆栈虚拟机，所有操作通过压栈和弹栈完成。
• 线性内存（Linear Memory）：
  • 由 Wasm 模块管理的连续内存块，通过 <font style="color:rgb(64, 64, 64);">load</font> 和 <font style="color:rgb(64, 64, 64);">store</font> 指令访问。
  • 内存大小可动态增长，但需提前声明初始和最大容量。
• 表格（Table）：用于存储函数引用，支持动态函数调用（如函数指针）。

编译与执行流程

1. 前端编译：
   将 C/C++、Rust 等语言通过编译器（如 LLVM）生成 Wasm 二进制文件。
2. 浏览器加载：
   • 下载 <font style="color:rgb(64, 64, 64);">.wasm</font> 文件并解码为模块。
   • 验证模块安全性（类型检查、内存边界等）。
3. 即时编译（JIT）：
   浏览器将 Wasm 代码编译为宿主机器的原生机器码。
4. 执行：
   • 通过 JavaScript API（如 <font style="color:rgb(64, 64, 64);">WebAssembly.instantiate()</font>）与 Wasm 交互。
   • 运行在隔离的沙箱环境中，无法直接访问 DOM 或系统 API

与 JavaScript 的关系

• 互补而非替代：
  Wasm 负责高性能计算，JavaScript 处理 DOM 操作、事件等。

交互方式：

- <font style="color:rgb(64, 64, 64);">通过</font><font style="color:rgb(64, 64, 64);"> </font>`<font style="color:rgb(64, 64, 64);">import</font>`<font style="color:rgb(64, 64, 64);"> </font><font style="color:rgb(64, 64, 64);">和</font><font style="color:rgb(64, 64, 64);"> </font>`<font style="color:rgb(64, 64, 64);">export</font>`<font style="color:rgb(64, 64, 64);"> </font><font style="color:rgb(64, 64, 64);">共享函数。</font>
- <font style="color:rgb(64, 64, 64);">使用 </font>`<font style="color:rgb(64, 64, 64);">Memory</font>`<font style="color:rgb(64, 64, 64);"> 和 </font>`<font style="color:rgb(64, 64, 64);">Table</font>`<font style="color:rgb(64, 64, 64);"> 对象共享内存和函数引用。</font>

// JavaScript 调用 Wasm 函数
WebAssembly.instantiateStreaming(fetch('math.wasm'))
  .then(obj => {
    console.log(obj.instance.exports.add(2, 3)); // 输出 5
  });

核心优势与性能优化

性能关键点

• 预编译二进制：相比 JavaScript 的解析和解释，Wasm 跳过文本解析阶段。
• 静态类型系统：编译时确定类型，避免运行时类型检查开销。
• 确定性内存布局：内存连续分配，减少缓存未命中。

与 asm.js 的对比

开发工具链与生态系统

支持的语言与编译器

• C/C++：Emscripten（基于 LLVM）、Clang。
• Rust：通过 <font style="color:rgb(64, 64, 64);">wasm-pack</font> 工具链直接编译为 Wasm。
• Go：从 Go 1.11 起支持编译为 Wasm。
• 其他语言：Kotlin、AssemblyScript（TypeScript 方言）等。

调试与工具

• 浏览器 DevTools：Chrome 和 Firefox 支持 Wasm 源码映射（Source Map），可直接调试 <font style="color:rgb(64, 64, 64);">.wat</font> 或原始高级语言代码。
• 性能分析：使用浏览器性能分析器（如 Chrome Profiler）定位 Wasm 函数热点。
• WABT（WebAssembly Binary Toolkit）：提供 <font style="color:rgb(64, 64, 64);">wasm2wat</font>、<font style="color:rgb(64, 64, 64);">wat2wasm</font> 等命令行工具。

框架与运行时

• WebAssembly System Interface（WASI）：
  定义 Wasm 与操作系统交互的标准接口，支持在非浏览器环境（如服务器）运行 Wasm。
• Wasmtime：独立的 Wasm 运行时，支持 WASI。
• Emscripten：提供 POSIX 兼容的虚拟文件系统和系统调用模拟。

应用场景与案例

高性能 Web 应用

• 游戏引擎：Unity 和 Unreal Engine 支持导出为 Wasm，实现浏览器内运行 3A 级游戏。
• 音视频处理：FFmpeg 编译为 Wasm，支持浏览器内视频转码。
• CAD 与图形设计：AutoCAD Web 版使用 Wasm 加速渲染。

服务端与边缘计算

• Serverless 函数：Cloudflare Workers 支持 Wasm，提供更低冷启动时间。
• 区块链智能合约：以太坊的 eWASM 替代 EVM，提升合约执行效率。

跨平台应用

• 桌面应用：通过 Electron 或 Tauri 集成 Wasm，实现跨平台高性能模块。
• 移动端：Flutter 支持嵌入 Wasm 模块。

**安全模型**

• 沙箱隔离：Wasm 无法直接访问宿主环境（如 DOM、网络、文件系统），必须通过 JavaScript 代理。
• 内存安全：线性内存的访问需严格校验边界，防止缓冲区溢出。
• 控制流完整性（CFI）：限制间接跳转目标，防止代码注入攻击。

**总结**

• 突破 JavaScript 性能瓶颈。
• 复用现有 C/C++/Rust 代码到 Web。
• 构建跨平台的高性能应用。

参考链接

• MDN：https://developer.mozilla.org/zh-CN/docs/WebAssembly
• WebAssembly 历史背景 - 掘金