Rust 用 wasm-bindgen 把计算函数编译进浏览器：给前端补一块原生速度

什么时候把 Rust 搬进前端

前端遇到图像、加密、大量数值计算时，JS 会卡。把这部分用 Rust 写、编译成 WebAssembly，能在浏览器里跑出接近原生的速度，再借 wasm-bindgen 把函数暴露给 JS 调用。

最小工程

// Cargo.toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fib(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fib(n - 1) + fib(n - 2),
    }
}

构建与调用

用 wasm-pack 产出 npm 包，前端直接 import：

# 构建
wasm-pack build --target web

# 前端
import init, { fib } from './pkg/my_wasm.js'
await init()
console.log(fib(20)) // 6765

把数据传进去：用 typed array

大数组不要一个个传，用 Uint8Array 走内存视图，避免反复拷贝：

#[wasm_bindgen]
pub fn sum_bytes(input: &[u8]) -> u32 {
    input.iter().map(|&b| b as u32).sum()
}

JS 侧传一个 Uint8Array，wasm-bindgen 直接复用那段线性内存，零拷贝。

实际工程建议

• WASM 和 JS 之间传递字符串、数组有序列化成本，颗粒度要粗，别在循环里来回调。
• 递归 fib 只是示例，真实计算优先用迭代或记忆化，避免爆栈。
• 调试用 console_error_panic_hook，把 Rust panic 打到浏览器控制台。