跳到主要内容

WebAssembly

问题​

Rust 如何编译为 WebAssembly？有哪些前端应用场景？

答案​

Rust 是编译到 WebAssembly 的最佳语言之一——没有 GC 运行时、二进制小、性能接近原生。

关于 WebAssembly 的基础概念请参考 WebAssembly 基础。

wasm-pack 工作流​

# 安装
cargo install wasm-pack

# 创建项目
cargo new --lib my-wasm
Cargo.toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
src/lib.rs
use wasm_bindgen::prelude::*;

// 导出给 JavaScript 调用
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 | 1 => n,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// 调用 JavaScript 函数
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    log(&format!("Hello, {}!", name));
}
wasm-pack build --target web
index.js
import init, { fibonacci, greet } from './pkg/my_wasm.js';

await init();
console.log(fibonacci(40)); // 比 JS 快 10-50x
greet("World");

前端 Wasm 应用场景​

场景示例性能提升
图片处理Photon（Rust Wasm）5-10x
加密计算哈希、签名10-20x
代码编辑器tree-sitter 语法高亮显著提升
PDF 渲染PDF.js + Wasm提升
游戏引擎Bevy (Wasm)接近原生

常见面试问题​

Q1: Rust Wasm 适合前端的什么场景？​

答案：

适合：CPU 密集型计算（算法、加密、编解码、图文处理） 不适合：DOM 操作（JS 更快，因为 Wasm→JS→DOM 有桥接开销）

经验法则：如果一个操作在 JS 中需要 > 16ms（影响帧率），考虑移到 Wasm。

Q2: Wasm 的体积怎么优化？​

答案：

[profile.release]
opt-level = "z"     # 优化体积
lto = true
strip = true

再用 wasm-opt -Oz 进一步压缩。典型的 Rust Wasm 模块：10-100KB（gzip 后）。

相关链接​