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

RustNode.js大前端算法

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

综述由AI生成Rust 结合 WebAssembly 技术，实现了在浏览器端和 Node.js 环境中的高性能计算。涵盖 Wasm 基础原理、wasm-pack 工具链使用、Rust 与 JavaScript 的双向交互（包括复杂数据转换与异步处理），并通过图像滤镜和数据压缩两个真实案例展示了实际应用场景。同时总结了内存管理、类型转换及模块加载等常见问题的解决方案，帮助开发者构建跨平台的高性能应用。

热情发布于 2026/3/22更新于 2026/4/305 浏览

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

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

一、学习目标与重点

1.1 学习目标

理解 WebAssembly 基础：深入掌握 Wasm 的核心定义、运行机制，以及与 JavaScript 的性能对比。
掌握 Rust 到 Wasm 的编译：熟练使用 wasm-pack 等工具链，完成 Rust 代码到 Wasm 模块的编译、打包和优化。
精通 Rust 与 JavaScript 交互：实现双向调用（Rust 调 JS、JS 调 Rust），处理复杂数据类型，管理 Wasm 线性内存。
开发真实 Wasm 应用：编写浏览器端高性能任务（如 Canvas 图像滤镜）和 Node.js 端计算密集型任务（如数据压缩）。
优化与部署：使用 wasm-opt 优化体积，学习集成到 Vite/Webpack 项目并部署到 CDN。

1.2 学习重点

💡 三大核心难点

Wasm 线性内存的管理：理解 Rust 分配器如何与 Wasm 内存配合，避免泄漏。
复杂数据类型的转换：掌握 serde-wasm-bindgen 等库如何将 Rust Struct/Enum 高效互转为 JS Object/Array。
异步交互与 DOM 操作：使用 wasm-bindgen-futures 和 web-sys 实现 HTTP 请求和 DOM 事件监听。

⚠️ 三大高频错误点

未正确释放内存：Rust 通过 wasm-bindgen 分配的内存若未释放，会导致浏览器或 Node.js 内存泄漏。
数据类型边界检查：处理 u8/u16/i32 与 JS Number 类型时，需防止溢出。
模块加载失败：Webpack/Vite 配置不当或浏览器版本不支持可能导致加载报错。

二、WebAssembly 基础

2.1 定义与特点

WebAssembly（Wasm）是一种可移植、高性能的低级字节码格式。它最初设计用于浏览器，但现在也支持 Node.js、Wasmtime 等独立运行时。

核心特点包括：

高性能：执行速度接近原生代码，比 JavaScript 快 10-100 倍。
可移植性：一次编译，到处运行。
安全性：运行在沙箱环境中，有严格的内存访问限制。
体积小：加载速度快，适合网络传输。

2.2 性能对比

指标	JavaScript	WebAssembly（Rust）
执行速度（计算密集型）	🌟	🌟🌟🌟🌟🌟
内存占用	🌟🌟🌟	🌟🌟🌟🌟

# 使用 Cargo 安装
cargo install wasm-pack

# 需要 Rust 1.70 或更高版本
cargo install cargo-web --version 0.6.42

wasm-pack new rust-wasm-demo
cd rust-wasm-demo

use wasm_bindgen::prelude::*;

// 标记可以被 JavaScript 调用的函数
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}! This is Rust running in WebAssembly!", name)
}

// 计算斐波那契数列
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    if n == 0 || n == 1 {
        return n;
    }
    let mut a = 0;
    let mut b = 1;
    for _ in 2..=n {
        let c = a + b;
        a = b;
        b = c;
    }
    b
}

// 计算数组的平均值
#[wasm_bindgen]
pub fn average(arr: &[f64]) -> f64 {
    if arr.is_empty() {
        return 0.0;
    }
    let sum: f64 = arr.iter().sum();
    sum / arr.len() as f64
}

# 编译为 npm 包
wasm-pack build --target web

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Rust WebAssembly Demo</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
        .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; }
        button { margin-top: 10px; padding: 10px 20px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; }
    </style>
</head>
<body>
<div class="container">
    <h1>Rust WebAssembly Demo</h1>
    <div>
        <label>姓名：</label><input type="text" id="name" value="张三">
        <button onclick="greet()">打招呼</button>
        <div id="greet-result"></div>
    </div>
    <script type="module">
        import init, { greet, fibonacci, average } from './pkg/rust_wasm_demo.js';
        async function run() {
            await init();
            console.log('Rust WebAssembly 模块初始化成功');
        }
        run();

        window.greet = function() {
            const name = document.getElementById('name').value;
            const result = greet(name);
            document.getElementById('greet-result').textContent = result;
        };

        window.calculateFibonacci = function() {
            const n = parseInt(document.getElementById('fibonacci-n').value || '40');
            const start = performance.now();
            const result = fibonacci(n);
            const end = performance.now();
            document.getElementById('fibonacci-result').textContent = `第${n}项：${result}, 耗时：ms`;
        };
    </script>
</div>
</body>
</html>

npm init vite@latest . -- --template vanilla
npm install
npm run dev

[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"] }

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

#[derive(Debug, Serialize)]
struct User {
    id: u32,
    username: String,
    email: String,
    age: Option<u8>,
}

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

function getUsers() {
    const users = get_users();
    console.log('用户列表:', users);
    document.getElementById('users-result').textContent = JSON.stringify(users, null, 2);
}

[dependencies]
wasm-bindgen-futures = "0.4"
reqwest = { version = "0.11", features = ["json"] }

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

#[derive(Debug, Deserialize)]
struct GitHubUser {
    login: String,
    avatar_url: String,
}

#[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()
}

[dependencies.web-sys]
version = "0.3"
features = ["Document", "Element", "HtmlElement", "Window", "Event"]

use wasm_bindgen::prelude::*;
use web_sys::{document, window};

#[wasm_bindgen]
pub fn create_todo_list() {
    let document = document().expect("无法获取文档对象");
    let container = document.create_element("div").expect("无法创建容器");
    container.set_id("todo-container");
    container.set_inner_html(r#"<h2>待办事项列表</h2><input type="text"><button>添加</button><div></div>"#);
    document.body().expect("无法获取 body").append_child(&container).expect("无法添加容器");
}

use wasm_bindgen::prelude::*;
use imageproc::filter::gaussian_blur_f32;
use base64;

fn base64_to_image(base64: &str) -> Vec<u8> {
    let bytes = base64::decode(base64).expect("解析 base64 图片数据失败");
    bytes
}

#[wasm_bindgen]
pub fn apply_grayscale(base64: &str) -> String {
    // 实际项目中应使用 image crate 解码
    let data = base64_to_image(base64);
    // 模拟处理...
    format!("data:image/png;base64,processed_{}", base64::encode(data))
}

#[wasm_bindgen]
pub fn apply_blur(base64: &str, sigma: f32) -> String {
    let data = base64_to_image(base64);
    // 调用 blur 算法
    format!("data:image/png;base64,blurred_{}", base64::encode(data))
}

async function applyFilter() {
    const originalImage = document.getElementById('original-image');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.onload = async function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const dataURL = canvas.toDataURL('image/png');
        const filteredDataURL = apply_grayscale(dataURL);
        document.getElementById('filtered-image').src = filteredDataURL;
    };
    img.src = originalImage.src;
}

use wasm_bindgen::prelude::*;
use flate2::write::GzEncoder;
use flate2::Compression;
use std::io::Write;

#[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)
}

#[wasm_bindgen]
pub fn decompress_string(input: &str) -> String {
    let compressed = base64::decode(input).expect("解析失败");
    let mut decoder = flate2::read::GzDecoder::new(&compressed[..]);
    let mut decompressed = String::new();
    std::io::Read::read_to_string(&mut decoder, &mut decompressed).expect("解压失败");
    decompressed
}

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

async function run() {
    await wasmModule.default();
    const testString = 'Hello, this is a test string for data compression! '.repeat(1000);
    const compressedString = wasmModule.compress_string(testString, 9);
    const decompressedString = wasmModule.decompress_string(compressedString);
    console.log(`压缩率：${((1 - compressedString.length / testString.length) * 100).toFixed(2)}%`);
    console.log(`解压缩成功：${decompressedString === testString}`);
}
run();