Rust 与 WebAssembly 实战：在浏览器与 Node.js 中运行高性能代码

编译与调用

使用 wasm-pack build --target web 编译后，会生成 .js 和 .wasm 文件。在 HTML 中引入即可。

<script type="module">
import init, { greet, fibonacci } from './pkg/rust_wasm_demo.js';

async function run() {
    await init();
    console.log('Rust WebAssembly 模块初始化成功');
    
    const result = greet('World');
    console.log(result);
    
    const fib = fibonacci(40);
    console.log(`Fibonacci(40): ${fib}`);
}
run();
</script>

进阶：复杂数据与异步处理

在实际项目中，我们经常需要处理对象、数组以及异步操作。这时就需要借助 serde-wasm-bindgen 和 wasm-bindgen-futures。

序列化与反序列化

Rust 的结构体可以通过 serde 序列化为 JS 的对象。这比手动映射字段更安全且高效。

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_user() -> JsValue {
    let user = User {
        id: 1,
        username: "Alice".to_string(),
        email: "[email protected]".to_string(),
    };
    to_value(&user).expect("Serialization failed")
}

异步交互

Wasm 本身是同步的，但在浏览器或 Node.js 中，我们常需要发起 HTTP 请求。通过 spawn_local 可以将 async/await 模式安全地集成到 Wasm 环境中。

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

#[wasm_bindgen]
pub fn fetch_github_user(username: &str) -> js_sys::Promise {
    let username = username.to_string();
    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);
            match client.get(&url).send().await {
                Ok(res) => {
                    // 简化处理，实际需解析 JSON
                    resolve.call1(&JsValue::NULL, &JsValue::NULL).unwrap();
                }
                Err(e) => {
                    reject.call1(&JsValue::NULL, &JsValue::from_str(&e.to_string())).unwrap();
                }
            }
        });
    })
}

真实案例：图像滤镜与数据压缩

浏览器端图像滤镜

利用 Rust 处理像素数据的速度优势，我们可以实现高性能的 Canvas 滤镜。这里使用了 image 和 imageproc 库。

use image::{DynamicImage, RgbaImage};
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn apply_grayscale(base64: &str) -> String {
    // 解码 Base64 图片
    let bytes = base64::decode(base64).expect("Decode failed");
    let mut img = image::load_from_memory(&bytes).expect("Load failed").to_rgba8();

    // 遍历像素应用灰度算法
    for pixel in img.pixels_mut() {
        let r = pixel[0] as u32;
        let g = pixel[1] as u32;
        let b = pixel[2] as u32;
        let gray = ((r * 299 + g * 587 + b * 114) / 1000) as u8;
        pixel[0] = gray;
        pixel[1] = gray;
        pixel[2] = gray;
    }

    // 编码回 Base64
    let mut buffer = Vec::new();
    image::write_buffer_with_format(
        &mut buffer,
        &img,
        image::ImageOutputFormat::Png
    ).expect("Save failed");
    format!("data:image/png;base64,{}", base64::encode(buffer))
}

Node.js 端数据压缩

在 Node.js 环境下，Wasm 同样能胜任计算密集型任务，比如文件压缩。这里演示了如何使用 flate2 库。

use flate2::write::GzEncoder;
use flate2::Compression;
use std::io::Write;

#[wasm_bindgen]
pub fn compress_bytes(input: &[u8], level: u32) -> Vec<u8> {
    let mut encoder = GzEncoder::new(Vec::new(), Compression::new(level));
    encoder.write_all(input).expect("Write failed");
    encoder.finish().expect("Finish failed")
}

在 Node.js 中调用时，只需像导入普通模块一样加载生成的 JS 文件即可。

常见问题排查

内存泄漏

Wasm 运行在沙箱中，线性内存的管理至关重要。如果频繁分配大对象而不释放，会导致浏览器卡顿。确保在不再需要时使用 Box::into_raw 或智能指针管理生命周期，并在 JS 侧及时清理引用。

类型转换边界

JS 的 Number 类型是双精度浮点，而 Rust 有严格的整数类型。在进行 i32 与 Number 互转时，务必检查数值范围，避免溢出导致未定义行为。

加载失败

如果遇到 WebAssembly.instantiateStreaming failed，请检查以下几点：

1. 确保 .wasm 文件路径正确。
2. 确认服务器支持正确的 MIME 类型 (application/wasm)。
3. 检查构建配置是否开启了 CORS 支持。

总结

通过本文，我们掌握了 Rust 编译为 WebAssembly 的核心流程，实现了从基础函数调用到复杂数据结构、异步 IO 及 DOM 操作的完整链路。无论是前端图像处理还是后端计算加速，Wasm 都能提供卓越的性能表现。后续可以进一步探索 WASI 标准，将 Wasm 扩展到更多边缘计算场景中。