WebAssembly (WASM) 面向 Web 开发者的实用指南

Code on a screen

WebAssembly（缩写为 WASM）是过去十年中登陆浏览器最令人兴奋的技术之一。它允许你在浏览器标签页中直接运行用 C、C++、Rust 和 Go 等语言编写的代码，速度接近原生，无需任何插件。

本指南涵盖了 Web 开发者今天开始使用 WebAssembly 所需了解的一切。

什么是 WebAssembly？

WebAssembly 是一种面向基于堆栈的虚拟机的二进制指令格式。它被设计为高级语言的可移植编译目标，支持在 Web 上部署客户端和服务器应用程序。

可以把它理解为浏览器的低级汇编语言——但它是安全的、沙箱化的，并且被设计为与 JavaScript 协同运行，而非取而代之。

关键事实： WebAssembly 现已成为 W3C 标准，所有主流浏览器均支持：Chrome、Firefox、Safari 和 Edge。

为什么你应该关注？

JavaScript 功能极为强大，但也存在局限性——尤其是在 CPU 密集型任务方面，例如：

视频/音频编解码
图像处理和滤镜
物理模拟和 3D 渲染
密码学
在浏览器中运行遗留的 C/C++ 代码库

WebAssembly 通过以更接近原生机器码的速度执行，填补了这些空白。

特性	JavaScript	WebAssembly
执行速度	解释执行 / JIT	接近原生
类型系统	动态类型	强类型
语言支持	仅 JS	C、C++、Rust、Go 等
文件格式	文本（`.js`）	二进制（`.wasm`）
DOM 访问	直接访问	通过 JavaScript 桥接

WebAssembly 的工作原理

典型的工作流程如下：

编写支持语言的代码（例如 Rust 或 C++）
使用工具链（例如 wasm-pack、Emscripten）将其编译为 .wasm 二进制文件
使用 WebAssembly API 在 JavaScript 中加载 .wasm 文件
直接从 JavaScript 代码中调用导出的 WASM 函数

Source Code (Rust/C++) → Compiler → .wasm binary → Browser

你的第一个 WebAssembly 模块

让我们通过一个使用 Rust 和 wasm-pack 的简单示例来逐步了解。

第一步：安装工具链

# Install Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Install wasm-pack
cargo install wasm-pack

第二步：创建 Rust 库

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0u64;
            let mut b = 1u64;
            for _ in 2..=n {
                let c = a + b;
                a = b;
                b = c;
            }
            b
        }
    }
}

第三步：编译为 WASM

wasm-pack build --target web

这将生成一个 pkg/ 文件夹，其中包含你的 .wasm 文件和自动生成的 JavaScript 绑定。

第四步：在 JavaScript 中使用

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

async function run() {
  await init(); // Load and instantiate the WASM module

  console.log(add(3, 5));         // → 8
  console.log(fibonacci(40));     // → 102334155 (fast!)
}

run();

不使用打包工具加载 WASM

如果你没有使用打包工具，可以直接通过浏览器原生的 WebAssembly API 加载 WASM 模块：

async function loadWasm(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer, {});
  return instance.exports;
}

const wasm = await loadWasm('/my-module.wasm');
console.log(wasm.add(10, 20)); // → 30