WebAssembly 入门指南

引言

WebAssembly（简称 Wasm）是一种低级的类汇编语言，它提供了一种在浏览器中以接近原生速度运行代码的方法。Wasm 并不是为了取代 JavaScript，而是与其协同工作，特别适合处理计算密集型、实时图像处理、音视频解码等高负载场景。

WebAssembly 工作原理

编译与执行流程

Wasm 是一种二进制格式。开发者可以使用 C++、Rust、Go 等静态编译型语言编写底层算法，然后通过编译器（如 LLVM 或 Emscripten）将其编译为 .wasm 字节码。浏览器加载该字节码后，可以以极快的速度将其编译为机器码并运行。

线性内存模型

Wasm 运行在一个完全隔离的沙箱环境中。它与 JavaScript 之间的数据交互主要通过“线性内存（Linear Memory）”进行。这块内存其实就是一个巨大的 ArrayBuffer。当需要传递复杂数据结构时，需要在 JavaScript 侧将数据写入内存，并在 Wasm 侧通过指针进行读取。

为什么选择 Rust 编写 Wasm

极致的安全性与性能

Rust 没有垃圾回收机制（GC），这意味着它在 Wasm 环境下不需要携带笨重的运行时，产物体积非常小。此外，Rust 的所有权模型确保了内存安全，避免了 C++ 中常见的野指针和内存泄漏问题。

生态完善的 wasm-bindgen

Rust 社区提供了 wasm-bindgen 工具，它能自动生成 JavaScript 和 Rust 之间的胶水代码，极大简化了双方的类型映射和函数调用：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

浏览器端加载与调用

动态加载与实例化

在浏览器中，推荐使用流式加载（Streaming Compilation）来初始化 Wasm 模块，这允许浏览器边下载边编译，提升加载速度：

import init, { fibonacci } from './pkg/my_wasm_project.js';

async function run() {
  await init(); // 初始化 Wasm 模块
  const result = fibonacci(40);
  console.log('Result:', result);
}
run();

适用场景与局限性

• 适用：音视频编解码（如 FFmpeg Wasm）、游戏物理引擎、加密算法、3D 渲染（WebGL/WebGPU）。
• 不适用：频繁的 DOM 操作。由于 Wasm 无法直接访问 DOM，任何 DOM 操作都必须通过 JS 胶水代码中转，频繁的跨边界调用会导致严重的性能损耗。