Rust 与 WebAssembly 深度实战：浏览器与 Node.js 的高性能融合

编译与打包

wasm-pack build --target web

前端调用示例

在 HTML 中通过 ES Module 引入生成的 JS 文件。

<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 配合 serde-wasm-bindgen 进行序列化。

use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};
use serde_wasm_bindgen;

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

#[wasm_bindgen]
pub fn get_user() -> JsValue {
    let user = User {
        id: 1,
        username: "RustDev".to_string(),
        email: "[email protected]".to_string(),
    };
    serde_wasm_bindgen::to_value(&user).unwrap()
}

异步交互与 HTTP 请求

利用 wasm-bindgen-futures 可以在 Wasm 中发起异步网络请求。

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use reqwest::Client;

#[wasm_bindgen]
pub async fn fetch_github_user(username: &str) -> Result<JsValue, JsValue> {
    let client = Client::new();
    let url = format!("https://api.github.com/users/{}", username);
    
    match client.get(&url).send().await {
        Ok(res) => {
            let json: serde_json::Value = res.json().await?;
            Ok(serde_wasm_bindgen::to_value(&json).unwrap())
        },
        Err(e) => Err(JsValue::from_str(&e.to_string())),
    }
}

真实案例实践

案例一：浏览器端 Canvas 图像滤镜

在浏览器中处理图片时，Rust 能显著提升滤镜渲染速度。以下展示了灰度、模糊和锐化滤镜的实现逻辑。

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

#[wasm_bindgen]
pub fn apply_grayscale(base64: &str) -> String {
    // 解码 Base64 图片
    let bytes = base64::decode(base64).unwrap();
    let mut img = image::load_from_memory(&bytes).unwrap().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).unwrap();
    format!("data:image/png;base64,{}", base64::encode(buffer))
}

案例二：Node.js 端数据压缩

在 Node.js 环境中，Wasm 同样适用于处理大文件压缩解压。

use wasm_bindgen::prelude::*;
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).unwrap();
    encoder.finish().unwrap()
}

配合 Node.js 调用：

const wasmModule = require('./pkg/rust_wasm_demo.js');
await wasmModule.default();

const data = fs.readFileSync('large_file.bin');
const compressed = wasmModule.compress_bytes(data, 9);
fs.writeFileSync('output.gz', Buffer.from(compressed));

常见问题与排查

内存泄漏问题

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

数据类型溢出

JS 的 Number 类型是双精度浮点数，而 Rust 有严格的整数类型。在转换 i32/u32 时需进行边界检查，避免数据截断。

模块加载失败

若遇到 Failed to fetch 错误，请检查：

1. Wasm 文件路径是否正确。
2. 服务器是否支持正确的 MIME 类型（application/wasm）。
3. 构建工具（Webpack/Vite）的 Loader 配置。

总结

通过本文的实践，我们掌握了 Rust 编译为 WebAssembly 的核心流程。从基础的函数交互到复杂的图像处理与 Node.js 集成，Wasm 为高性能计算提供了可靠的解决方案。后续可以进一步探索 WASI 标准，将 Rust 应用部署到更广泛的边缘计算场景中。