1 
2WebAssembly（WASM）最初是为了在浏览器中运行C++而诞生的。到了2026年，它已经可以在各种环境中运行  -  浏览器、服务器、边缘网络、嵌入式设备  -  并为Web上最高负载的应用提供动力。Figma的渲染引擎、Web版Adobe Photoshop、Google Meet的视频处理以及Cloudflare的边缘计算平台都运行在WebAssembly之上。
3 
4根据Chrome Platform Status的数据，截至2026年初，WASM约占Chrome所有页面加载的5.5%，较前一年的4.5%有所增长。随着WASM 3.0成为W3C标准以及WASI向1.0版本成熟，整个生态系统已经到达了一个转折点。
5 
6本指南涵盖了你开始使用WebAssembly构建所需的一切知识。
7 
8## 什么是WebAssembly？
9 
10WebAssembly是一种作为编译目标而设计的二进制指令格式。你用高级语言（Rust、C、C++、Go、Kotlin）编写代码，编译为`.wasm`，然后在任何拥有WASM运行时的环境中运行  -  浏览器、Node.js、Cloudflare Workers、Wasmtime或Wasmer。
11 
12```mermaid
13graph LR
14    Rust[Rust / C / C++] --> Compiler[Compiler]
15    Compiler --> WASM[.wasm Binary]
16    WASM --> Browser[Browser V8/SpiderMonkey]
17    WASM --> Server[Server Wasmtime]
18    WASM --> Edge[Edge Cloudflare Workers]
19    WASM --> Embedded[Embedded WAMR]
20```
21 
22### 工作原理
23 
24WASM是一个**基于栈的虚拟机**。函数在操作数栈上推入和弹出值。宿主运行时（Chrome中的V8、Firefox中的SpiderMonkey）将WASM字节码JIT编译为原生机器码，因此性能接近原生水平。
25 
26关键特性：
27 
28- **沙箱执行**：WASM模块只能访问宿主明确授权的资源。未经许可，无法访问文件系统、网络或操作系统。这与原生代码有根本性的不同。
29- **线性内存**：WASM和宿主之间共享的单个连续`ArrayBuffer`。复杂数据（字符串、结构体）通过写入内存并共享指针来传递。
30- **类型受限**：WASM原生只支持四种类型：`i32`、`i64`、`f32`、`f64`。其他所有类型（字符串、数组、对象）需要通过线性内存或Component Model进行编码。
31- **可移植**：同一个`.wasm`二进制文件可以在任何拥有WASM运行时的平台上运行，无需重新编译。
32 
33### WASM vs JavaScript
34 
35WASM不是用来替代JavaScript的，而是用来补充它的。
36 
37| 方面 | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **解析** | 运行时解析+编译 | 预编译二进制文件，仅需解码 |
40| **执行速度** | JIT优化，性能波动 | 接近原生，性能稳定 |
41| **启动** | 小脚本启动快 | 快速解码，可预测 |
42| **DOM访问** | 直接 | 间接（通过JS胶水代码） |
43| **最适合** | UI、DOM操作、事件处理 | CPU密集型计算 |
44| **垃圾回收** | 内置 | WasmGC（新）或手动管理 |
45 
46UI和DOM操作用JavaScript。重计算用WASM：图像处理、视频编码、物理模拟、加密、数据解析。
47 
48## WASM 3.0：有什么新特性
49 
50WebAssembly 3.0于2025年9月成为W3C标准，标准化了历经多年开发的九项特性。
51 
52| 特性 | 实现的功能 |
53|---------|----------------|
54| **WasmGC** | WASM中的原生垃圾回收。托管语言（Java、Kotlin、Dart）可以编译到WASM而无需携带自己的GC运行时。Chrome 119+、Firefox 120+、Safari 18.2+已支持。 |
55| **Exception Handling** | WASM中的原生`try`/`catch`。此前，异常处理需要昂贵的JavaScript往返开销。 |
56| **Tail Calls** | 实现无栈溢出的高效递归。对函数式语言至关重要。 |
57| **Relaxed SIMD** | 用于并行数据处理的128位向量指令。支持硬件特定的优化。 |
58| **Memory64** | 突破4GB线性内存限制。大规模数据处理所必需。 |
59| **Multi-memory** | 一个模块中包含多个独立的内存区域。 |
60 
61影响最大的是**WasmGC**。在此之前，将Java或Kotlin编译到WASM意味着需要将整个垃圾回收器作为二进制文件的一部分，导致文件体积膨胀。现在，浏览器自身的GC可以像处理JavaScript一样为WASM模块管理内存。
62 
63## WASI：浏览器之外的WebAssembly
64 
65浏览器中的WASM已经很强大，但让WASM成为通用运行时的是**WASI（WebAssembly System Interface）**。WASI为系统资源  -  文件、网络、时钟、随机数  -  提供标准化接口，使WASM模块能够在浏览器之外运行。
66 
67```mermaid
68graph TD
69    subgraph "Browser"
70        B[WASM Module] --> Web[Web APIs\nDOM, Fetch, Canvas]
71    end
72 
73    subgraph "Server / Edge / Embedded"
74        S[WASM Module] --> WASI[WASI Interfaces]
75        WASI --> FS[wasi:filesystem]
76        WASI --> Net[wasi:sockets]
77        WASI --> HTTP[wasi:http]
78        WASI --> Clock[wasi:clocks]
79        WASI --> Rand[wasi:random]
80    end
81```
82 
83WASI Preview 2（当前稳定版本）定义了以下接口：
84 
85- `wasi:filesystem`  -  通过能力句柄（而非传统文件描述符）进行文件操作
86- `wasi:sockets`  -  TCP/UDP网络
87- `wasi:http`  -  HTTP请求/响应处理
88- `wasi:clocks`  -  墙上时钟、单调时钟
89- `wasi:random`  -  加密随机数
90- `wasi:cli`  -  命令行参数、环境变量、标准输入输出
91 
92核心原则是**基于能力的安全模型**：WASM模块无法访问文件系统，除非宿主明确授予特定目录的句柄。这使得WASI从根本上比运行原生可执行文件更加安全。
93 
94### 通往WASI 1.0之路
95 
96WASI 0.3.0（添加async/并发原语）预计在2026年发布，随后将推出WASI 1.0。主要新增功能是带有零拷贝流式I/O的语言级异步支持。
97 
98## Component Model
99 
100核心WASM模块只能交换数字。**Component Model**通过在WASM之上添加丰富的类型系统和可组合性层来解决这一限制。
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT是一种接口定义语言，允许组件使用丰富类型  -  字符串、记录、列表、变体、枚举  -  来声明其导入和导出，而不仅仅是`i32`和`f64`。
105 
106```wit
107// calculator.wit
108package myorg:calculator@1.0.0;
109 
110interface operations {
111    record calculation {
112        expression: string,
113        result: f64,
114        timestamp: u64,
115    }
116 
117    add: func(a: f64, b: f64) -> f64;
118    multiply: func(a: f64, b: f64) -> f64;
119    history: func() -> list<calculation>;
120}
121 
122world calculator {
123    export operations;
124}
125```
126 
127`wit-bindgen`等工具链可以从WIT文件生成特定语言的绑定。Rust组件和Python组件可以通过WIT契约交换字符串、记录和列表，而无需知道对方的实现语言。
128 
129## 使用Rust构建你的第一个WASM模块
130 
131Rust拥有最成熟的WASM工具链。让我们构建一个实际的例子：一个在浏览器中运行的图像处理模块。
132 
133### 环境配置
134 
135```bash
136# Install the WASM target for Rust
137rustup target add wasm32-unknown-unknown
138 
139# Install wasm-pack (builds Rust to WASM + generates JS bindings)
140cargo install wasm-pack
141 
142# Create a new library project
143cargo new --lib image-processor
144cd image-processor
145```
146 
147### 配置Cargo.toml
148 
149```toml
150[package]
151name = "image-processor"
152version = "0.1.0"
153edition = "2021"
154 
155[lib]
156crate-type = ["cdylib"]
157 
158[dependencies]
159wasm-bindgen = "0.2"
160```
161 
162### 编写Rust代码
163 
164```rust
165// src/lib.rs
166use wasm_bindgen::prelude::*;
167 
168/// Convert an image buffer to grayscale.
169/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
170/// Output: Modified in place for zero-copy performance.
171#[wasm_bindgen]
172pub fn grayscale(pixels: &mut [u8]) {
173    for chunk in pixels.chunks_exact_mut(4) {
174        let r = chunk[0] as f32;
175        let g = chunk[1] as f32;
176        let b = chunk[2] as f32;
177        // ITU-R BT.709 luminance coefficients
178        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
179        chunk[0] = gray;
180        chunk[1] = gray;
181        chunk[2] = gray;
182        // chunk[3] is alpha, leave unchanged
183    }
184}
185 
186/// Adjust brightness of an image.
187/// factor > 1.0 brightens, < 1.0 darkens.
188#[wasm_bindgen]
189pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
190    for chunk in pixels.chunks_exact_mut(4) {
191        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
192        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
193        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
194    }
195}
196 
197/// Invert all colors in the image.
198#[wasm_bindgen]
199pub fn invert(pixels: &mut [u8]) {
200    for chunk in pixels.chunks_exact_mut(4) {
201        chunk[0] = 255 - chunk[0];
202        chunk[1] = 255 - chunk[1];
203        chunk[2] = 255 - chunk[2];
204    }
205}
206 
207/// Calculate the average brightness of an image (0-255).
208#[wasm_bindgen]
209pub fn average_brightness(pixels: &[u8]) -> f32 {
210    let mut total: f64 = 0.0;
211    let pixel_count = pixels.len() / 4;
212    for chunk in pixels.chunks_exact(4) {
213        let luminance = 0.2126 * chunk[0] as f64
214            + 0.7152 * chunk[1] as f64
215            + 0.0722 * chunk[2] as f64;
216        total += luminance;
217    }
218    (total / pixel_count as f64) as f32
219}
220```
221 
222### 构建
223 
224```bash
225wasm-pack build --target web
226```
227 
228这将生成一个`pkg/`目录，包含：
229- `image_processor_bg.wasm`  -  编译后的WASM二进制文件
230- `image_processor.js`  -  附带TypeScript类型定义的JavaScript胶水代码
231- `package.json`  -  可直接发布到npm
232 
233### 在JavaScript中使用
234 
235```html
236<!DOCTYPE html>
237<html>
238<head><title>WASM Image Processor</title></head>
239<body>
240  <canvas id="canvas" width="800" height="600"></canvas>
241  <button onclick="applyGrayscale()">Grayscale</button>
242  <button onclick="applyBrightness()">Brighten</button>
243  <button onclick="applyInvert()">Invert</button>
244 
245  <script type="module">
246    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";
247 
248    let ctx;
249    let imageData;
250 
251    async function setup() {
252      await init();
253      const canvas = document.getElementById("canvas");
254      ctx = canvas.getContext("2d");
255 
256      // Load an image onto the canvas
257      const img = new Image();
258      img.onload = () => {
259        ctx.drawImage(img, 0, 0);
260        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
261      };
262      img.src = "photo.jpg";
263    }
264 
265    window.applyGrayscale = () => {
266      grayscale(imageData.data);
267      ctx.putImageData(imageData, 0, 0);
268    };
269 
270    window.applyBrightness = () => {
271      adjust_brightness(imageData.data, 1.3);
272      ctx.putImageData(imageData, 0, 0);
273    };
274 
275    window.applyInvert = () => {
276      invert(imageData.data);
277      ctx.putImageData(imageData, 0, 0);
278    };
279 
280    setup();
281  </script>
282</body>
283</html>
284```
285 
286关键点在于：`imageData.data`是一个由`ArrayBuffer`支持的`Uint8ClampedArray`。传递给WASM时，它共享同一块内存  -  不需要复制。Rust函数就地修改像素，JavaScript端可以立即看到变化。
287 
288## 低层级：手动WASM实例化
289 
290如果你不想使用`wasm-bindgen`，可以直接实例化WASM模块：
291 
292```javascript
293const response = await fetch("calculator.wasm");
294const { instance } = await WebAssembly.instantiateStreaming(response, {
295  env: {
296    // Functions the WASM module can call
297    log_result: (value) => console.log("Result:", value),
298  },
299});
300 
301// Call exported functions
302const { add, multiply } = instance.exports;
303console.log(add(5, 3));       // 8
304console.log(multiply(4, 7));  // 28
305```
306 
307当你需要最小开销且不需要丰富的类型互操作时，这很有用。
308 
309## 性能：WASM vs JavaScript
310 
311真实世界的基准测试显示，CPU密集型任务获得了显著的加速：
312 
313| 任务 | JavaScript | WASM | 加速比 |
314|------|-----------|------|---------|
315| 4K图像处理 | 180ms | 8ms（使用SIMD） | 22倍 |
316| 图像缩放（4K） | 250ms | 45ms | 5.5倍 |
317| 物理模拟（1万实体） | 掉帧 | 流畅60fps | 约10倍 |
318| JSON解析（大负载） | 12ms | 3ms | 4倍 |
319| 加密哈希 | 45ms | 6ms | 7.5倍 |
320 
321WASM的运行速度约为原生代码的95%。最大的优势来自：
322- 可预测的性能（无JIT预热、无GC暂停）
323- 用于并行数据处理的SIMD指令
324- 无垃圾回收器干扰的直接内存访问
325 
326WASM不会更快的场景：DOM操作、小规模计算、I/O密集型任务。JavaScript已经为这些场景进行了优化。
327 
328## 生产应用案例
329 
330### Figma：实时矢量渲染
331 
332Figma的核心渲染引擎是用C++编译到WASM的。每个形状、渐变和效果都在WASM中计算并绘制到Canvas元素上。这使得Figma能够在浏览器中以60fps处理包含数千图层的复杂设计  -  这在纯JavaScript中是不可能实现的性能。
333 
334### Web版Adobe Photoshop
335 
336Adobe使用Rust将Photoshop的关键滤镜和工具移植到了WASM。他们的基准测试显示，使用WASM SIMD进行4K图像处理仅需22ms，而JavaScript需要180ms  -  提升了8倍，使得实时滤镜预览成为可能。
337 
338### Cloudflare Workers
339 
340Cloudflare在遍布330多个边缘节点的V8隔离区中运行WASM模块。冷启动时间为1-5ms（相比基于容器的Serverless的100-500ms）。2026年2月，他们使用WASM在整个边缘网络上部署了Llama-3-8b推理。
341 
342### Google Meet
343 
344Google Meet的背景模糊和虚拟背景使用带SIMD的WASM进行实时视频处理。WASM模块以足够快的速度处理每一帧视频，保持30fps的流畅视频。
345 
346## 浏览器支持（2026年）
347 
348| 特性 | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| 核心WASM | 完全 | 完全 | 完全 | 完全 |
351| Threads | 支持 | 支持 | 支持 | 支持 |
352| SIMD（128位） | 支持 | 支持 | 支持 | 支持 |
353| WasmGC | 119+ | 120+ | 18.2+ | 支持 |
354| Exception Handling | 支持 | 支持 | 支持 | 支持 |
355| Memory64 | 支持 | 支持 | 部分 | 支持 |
356 
357所有主流浏览器都完全支持WASM。较新的特性（WasmGC、Exception Handling）已经广泛可用。
358 
359## 工具参考
360 
361| 工具 | 用途 | 安装方式 |
362|------|---------|---------|
363| **wasm-pack** | 将Rust构建为WASM，生成npm包 | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS互操作绑定（wasm-pack使用） | Cargo.toml中的依赖 |
365| **wasm-opt** | 二进制大小优化（50%以上的缩减） | Binaryen的一部分：`brew install binaryen` |
366| **wit-bindgen** | 从WIT文件生成绑定 | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | 服务端WASM运行时（WASI参考实现） | `brew install wasmtime` |
368| **Wasmer** | 支持WASI的替代WASM运行时 | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | 运行时浏览器特性检测 | `npm install wasm-feature-detect` |
370 
371### 优化二进制大小
372 
373WASM二进制文件可能很大。以下是缩减方法：
374 
375```toml
376# Cargo.toml
377[profile.release]
378opt-level = "z"     # Optimize for size
379lto = true          # Link-time optimization
380codegen-units = 1   # Better optimization, slower compile
381strip = true        # Strip debug symbols
382```
383 
384```bash
385# Build in release mode
386wasm-pack build --release --target web
387 
388# Further optimize with wasm-opt
389wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
390```
391 
392典型的Rust WASM模块经过这些优化后，可以从500KB缩减到50KB以下。
393 
394## 入门路线图
395 
396```mermaid
397flowchart TD
398    A[Week 1: Basics] --> B[Week 2: Real Project]
399    B --> C[Week 3: WASI and Server-side]
400    C --> D[Month 2+: Production]
401 
402    A --> A1[Install Rust + wasm-pack]
403    A --> A2[Build hello-world WASM module]
404    A --> A3[Call WASM functions from JavaScript]
405 
406    B --> B1[Build image processor or game physics]
407    B --> B2[Use wasm-bindgen for rich types]
408    B --> B3[Benchmark against pure JS]
409 
410    C --> C1[Run WASM with Wasmtime]
411    C --> C2[Explore WASI interfaces]
412    C --> C3[Try Component Model with WIT]
413 
414    D --> D1[Optimize binary size]
415    D --> D2[Use SIMD for parallelism]
416    D --> D3[Deploy to Cloudflare Workers or browser]
417```
418 
419## 结语
420 
421WebAssembly不再是实验性技术。它是一项被Web上最高负载应用所采用的生产技术。接近原生的性能、沙箱安全性和通用可移植性  -  没有其他编译目标能同时提供这三者。
422 
423你不需要用WASM重写整个应用。从一个CPU密集型函数开始  -  一个图像滤镜、一个数据解析器、一个物理计算  -  编译为WASM，然后从JavaScript调用它。测量差异，然后决定WASM还能在哪里发挥作用。
424 
425工具已经成熟，浏览器支持已经普及，生态系统正在不断壮大。如果你在写Rust，你距离浏览器只差一个命令。
426 
427> **入门检查清单：**
428>
429> - [x] 安装Rust和wasm-pack
430> - [x] 构建第一个WASM模块并在浏览器中运行
431> - [x] JavaScript互操作正常工作（从JS调用WASM）
432> - [x] 应用大小优化的发布版本构建
433> - [x] 与纯JavaScript等效实现进行性能基准测试
434> - [x] 使用Wasmtime探索WASI的服务端用例
435