Rust 与 WebAssembly 深度实战：浏览器与 Node.js 高性能应用

编译与调用

编译为 Web 目标：

wasm-pack build --target web

生成的 pkg 目录包含 .js 和 .wasm 文件。在 HTML 中引入并初始化：

import init, { greet, fibonacci, average } from './pkg/rust_wasm_demo.js';

async function run() {
    await init();
    console.log('Rust WebAssembly 模块初始化成功');
}
run();

function calculateFibonacci() {
    const n = parseInt(document.getElementById('fibonacci-n').value);
    const result = fibonacci(n);
    document.getElementById('fibonacci-result').textContent = `第${n}项：${result}`;
}

进阶交互：复杂数据与异步

复杂数据类型转换

处理对象和数组时，serde 系列库非常有用。我们可以在 Cargo.toml 中添加依赖：

[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.5"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["console"] }

Rust 结构体序列化后返回给 JS：

use wasm_bindgen::prelude::*;
use serde::Serialize;
use serde_wasm_bindgen::to_value;

#[derive(Debug, Serialize)]
struct User {
    id: u32,
    username: String,
    email: String,
}

#[wasm_bindgen]
pub fn get_users() -> JsValue {
    let users = vec![
        User { id: 1, username: "张三".to_string(), email: "[email protected]".to_string() },
    ];
    to_value(&users).expect("序列化用户列表失败")
}

JS 端接收后即可像普通 JSON 一样处理。

异步交互与 HTTP 请求

在 Wasm 中发起异步请求需要使用 spawn_local 将 async 任务调度到 JS 事件循环。

use wasm_bindgen_futures::spawn_local;
use reqwest::Client;

#[wasm_bindgen]
pub fn get_github_user(username: &str) -> JsValue {
    let username = username.to_string();
    let promise = js_sys::Promise::new(&mut move |resolve, reject| {
        spawn_local(async move {
            let client = Client::new();
            let url = format!("https://api.github.com/users/{}", username);
            let result = client.get(&url).send().await.and_then(|response| response.json::<GitHubUser>().await);
            match result {
                Ok(user) => resolve.call1(&JsValue::NULL, &serde_wasm_bindgen::to_value(&user).unwrap()).unwrap(),
                Err(e) => reject.call1(&JsValue::NULL, &JsValue::from_str(&e.to_string())).unwrap(),
            }
        });
    });
    promise.into()
}

DOM 操作

通过 web-sys 可以直接操作 DOM，但需注意生命周期管理，特别是闭包中的引用。

use web_sys::{document, HtmlButtonElement};

#[wasm_bindgen]
pub fn create_todo_list() {
    let document = document().expect("无法获取文档对象");
    // 创建容器...
    // 添加事件监听
    let closure = Closure::wrap(Box::new(move |_e: Event| {
        // 处理点击逻辑
    }) as Box<dyn FnMut(_)>);
    add_button.add_event_listener_with_callback("click", closure.as_ref().unchecked_ref()).unwrap();
    closure.forget();
}

真实案例应用

案例一：Canvas 图像滤镜

利用 Rust 处理像素数据比 JS 快得多。以下是一个灰度滤镜的实现示例：

use imageproc::ops::invert;

#[wasm_bindgen]
pub fn apply_grayscale(base64: &str) -> String {
    let mut image = base64_to_image(base64);
    for pixel in image.pixels_mut() {
        let r = pixel[0] as u32;
        let g = pixel[1] as u32;
        let b = pixel[2] as u32;
        let gray = (r * 0.299 + g * 0.587 + b * 0.114) as u8;
        pixel[0] = gray;
        pixel[1] = gray;
        pixel[2] = gray;
    }
    image_to_base64(image)
}

前端只需调用该函数并替换图片源即可，无需担心渲染卡顿。

案例二：Node.js 数据压缩

在服务器端，Wasm 同样能发挥计算密集型任务的优势。例如使用 flate2 进行 Gzip 压缩：

use flate2::write::GzEncoder;
use flate2::Compression;

#[wasm_bindgen]
pub fn compress_string(input: &str, level: u32) -> String {
    let mut encoder = GzEncoder::new(Vec::new(), Compression::new(level));
    encoder.write_all(input.as_bytes()).expect("压缩失败");
    let compressed = encoder.finish().expect("压缩失败");
    base64::encode(compressed)
}

Node.js 端加载模块后直接调用，可获得比纯 JS 实现更高的压缩效率。

常见问题与解决

内存泄漏

如果在 Rust 中分配了内存但未释放，会导致 Wasm 实例膨胀。确保使用智能指针（如 Box<T>）并在不再需要时显式清理资源。对于 JsValue，注意不要持有过期的引用。

类型边界检查

Rust 的整数类型与 JS 的 Number 存在精度差异。在处理大整数或浮点数时，务必进行边界检查或使用 Wrapping 类型防止溢出。

模块加载失败

如果控制台报错 WebAssembly.instantiateStreaming failed，请检查：

1. Wasm 文件路径是否正确。
2. 构建工具（Webpack/Vite）是否配置了正确的 Loader。
3. 浏览器是否支持 Wasm（现代版本默认支持）。

结语

Rust 与 WebAssembly 的结合为 Web 性能优化提供了强有力的手段。从简单的数值计算到复杂的图像处理，掌握其编译流程、交互机制及内存管理规则，能让你的应用在浏览器和 Node.js 两端都保持高效稳定。后续可进一步探索 WASI 标准，将 Wasm 能力扩展至更多边缘计算场景。