WebAssembly 实战：用 Rust 构建高性能 Web 应用

在 Web 性能优化的道路上，WebAssembly（以下简称 Wasm）正在掀起一场静默的革命。作为 Web 史上首个原生支持多语言的运行时，它让高性能计算不再是native程序的专利。本文将带你用 Rust 构建第一个 Wasm 模块，体验写一次，运行在任何地方的魅力。

为什么选择 WebAssembly？

传统 JavaScript 引擎虽然强大，但在密集计算场景下仍有局限：

• 图形/图像处理：滤镜、加密、视频转码
• 复杂计算：物理引擎、机器学习推理
• 游戏渲染：3D 场景、粒子系统

Wasm 让你能用 C/C++/Rust/Zig 等系统级语言编写核心逻辑，编译为体积小、加载快、执行效率高的二进制格式。根据 Google 的测试，同样的图像处理逻辑，Wasm 比纯 JS 快 5-10 倍。

环境准备

首先安装 Rust 和 wasm-pack：

cargo install wasm-pack

创建第一个 Wasm 项目

cargo new --lib hello-wasm

修改 Cargo.toml：

[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"

编写 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) 
    }
}
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

编译为 Wasm

wasm-pack build --target web

编译完成后，会在 pkg/ 目录生成 .wasm 文件和 JavaScript 绑定代码。

在网页中使用

import init, { greet, fibonacci } from "./pkg/hello_wasm.js";
await init();
console.log(greet("Developer"));
console.log("Fibonacci(20) = " + fibonacci(20));

性能对比实测

我用同样的斐波那契算法做了对比测试：

提升约 6.7 倍！

总结

WebAssembly 并不是要取代 JavaScript，而是补足其在计算密集型场景的短板。通过 Rust 开发 Wasm 模块，你可以：

• 🚀 获得接近原生的执行性能
• 🔒 利用 Rust 的内存安全特性
• 🌐 一次编译，Web/Desktop/Mobile 多端运行

现在，是时候让你的 Web 应用快人一步了。