Rust 与 WebAssembly 实战：浏览器与 Node.js 高性能应用 | 极客日志

RustNode.js大前端算法

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

Rust 结合 WebAssembly 技术，可在浏览器和 Node.js 中实现高性能计算。文章涵盖从环境搭建、工具链配置到双向交互的完整流程。通过图像滤镜和数据压缩等真实案例，展示如何优化内存管理、处理复杂数据类型及异步任务。同时提供常见问题解决方案，帮助开发者构建高效稳定的 Wasm 应用。

黑客发布于 2026/4/8更新于 2026/5/2316 浏览

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

学习目标与重点

本文旨在帮助开发者深入掌握 WebAssembly（Wasm）的核心机制，并熟练使用 Rust 将其编译为可在浏览器和 Node.js 中运行的高性能模块。我们将重点解决以下几个关键问题：

理解 Wasm 基础：明确其运行机制及与 JavaScript 的性能差异。
工具链使用：掌握 wasm-pack 等工具完成编译、打包与优化。
交互实现：实现 Rust 与 JS 的双向调用，处理复杂数据与内存管理。
真实场景落地：涵盖图像滤镜、数据压缩等计算密集型任务。

核心难点

线性内存管理：需理解 Rust 分配器如何与 Wasm 内存配合，避免泄漏。
数据类型转换：掌握 Struct/Enum 与 Object/Array/String 的高效互转。
异步与 DOM：利用相关库实现 HTTP 请求及页面元素操作。

常见陷阱

内存泄漏：未正确释放 Rust 分配的内存会导致浏览器卡顿。
边界检查：数值类型转换时需防止溢出。
加载失败：配置不当可能导致模块无法在特定环境中加载。

WebAssembly 基础

WebAssembly 是一种可移植、高性能的低级字节码格式。它最初设计用于浏览器，现已扩展至 Node.js、Wasmtime 等独立运行时。

核心特点

高性能：执行速度接近原生代码，通常比 JavaScript 快 10-100 倍。
可移植性：一次编译，多端运行。
安全性：运行在沙箱中，内存访问受限。
体积小：加载速度快，适合网络传输。

适用场景

浏览器端：图像处理、音视频编解码、WebGL 计算。
Node.js 端：加密解密、数据压缩、机器学习推理。
边缘计算：在 CDN 节点运行轻量级逻辑。

编译工具链

安装 wasm-pack

wasm-pack 是官方推荐工具，支持编译、绑定生成及 npm 打包。

cargo install wasm-pack

安装 cargo-web

作为备选方案，cargo-web 支持热重载和开发服务器。

cargo install cargo-web --version 0.6.42

Rust 与 JavaScript 交互基础

创建项目

使用 wasm-pack 初始化项目：

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

编写 Rust 代码

在 src/lib.rs 中定义暴露给 JS 的函数。注意语法规范，确保空格和缩进正确。

相关免费在线工具

加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。在线工具，加密/解密文本在线工具，online
Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印，支持批量处理与下载。在线工具，Gemini 图片去水印在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online
Markdown转HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。在线工具，Markdown转HTML在线工具，online
HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。在线工具，HTML转Markdown在线工具，online

use wasm_bindgen::prelude::*;

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

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; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
        .result { margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 4px; font-family: monospace; }
        button { margin-top: 10px; padding: 10px 20px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; 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 class="result" 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;
        };
    </script>
</div>
</body>
</html>

[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), },
    ];
    to_value(&users).expect("序列化用户列表失败")
}

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

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

#[wasm_bindgen]
pub fn create_todo_list() {
    let document = document().expect("无法获取文档对象");
    // 创建容器
    let container = document.create_element("div").expect("无法创建容器");
    container.set_id("todo-container");
    // 添加到文档
    document.body().expect("无法获取 body 元素").append_child(&container).expect("无法添加容器");
}

use wasm_bindgen::prelude::*;
use image::RgbaImage;

#[wasm_bindgen]
pub fn apply_grayscale(base64: &str) -> String {
    let bytes = base64::decode(base64).expect("解析 base64 图片数据失败");
    let mut image = image::load_from_memory(&bytes).expect("加载图片失败").to_rgba8();
    
    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;
    }
    
    let mut buffer = Vec::new();
    image::write_buffer_with_format(&mut buffer, &image, image::ImageOutputFormat::Png).expect("保存图片失败");
    format!("data:image/png;base64,{}", base64::encode(buffer))
}

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

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);
    console.log(`字符串压缩率：${((1 - compressedString.length / testString.length) * 100).toFixed(2)}%`);
}
run();

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

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

学习目标与重点

核心难点

常见陷阱

WebAssembly 基础

核心特点

适用场景

编译工具链

安装 wasm-pack

安装 cargo-web

Rust 与 JavaScript 交互基础

创建项目

编写 Rust 代码

更多推荐文章

相关免费在线工具

编译模块

HTML 与 JavaScript 集成

交互进阶

复杂数据类型

依赖配置

Rust 实现

异步交互

DOM 操作

真实案例应用

案例 1：Canvas 图像滤镜

Rust 代码片段

案例 2：Node.js 数据压缩

Rust 实现

Node.js 调用

常见问题与解决方案

内存泄漏

数据类型溢出

模块加载失败

总结

更多推荐文章

相关免费在线工具

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

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

学习目标与重点

核心难点

常见陷阱

WebAssembly 基础

核心特点

适用场景

编译工具链

安装 wasm-pack

安装 cargo-web

Rust 与 JavaScript 交互基础

创建项目

编写 Rust 代码

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

编译模块

HTML 与 JavaScript 集成

交互进阶

复杂数据类型

依赖配置

Rust 实现

异步交互

DOM 操作

真实案例应用

案例 1：Canvas 图像滤镜

Rust 代码片段

案例 2：Node.js 数据压缩

Rust 实现

Node.js 调用

常见问题与解决方案

内存泄漏

数据类型溢出

模块加载失败

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具