WebAssembly 前端实践：在浏览器中运行 C/Rust 代码

WebAssembly 是什么

WASM 是一种二进制指令格式，运行在浏览器的沙箱虚拟机中，性能接近原生代码（约为 JS 的 10-30 倍）。支持从 C/C++/Rust/Go 编译，与 JavaScript 互操作。

Rust → WASM 入门

# 安装 wasm-pack
cargo install wasm-pack

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

[dependencies]
wasm-bindgen = "0.2"

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

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 { return n as u64; }
    fibonacci(n - 1) + fibonacci(n - 2)
}

#[wasm_bindgen]
pub fn grayscale(img_data: &[u8]) -> Vec {
    img_data.chunks(4).flat_map(|pixel| {
        let gray = (pixel[0] as f32 * 0.299 + pixel[1] as f32 * 0.587 + pixel[2] as f32 * 0.114) as u8;
        vec![gray, gray, gray, pixel[3]]
    }).collect()
}

JavaScript 调用

import init, { fibonacci, grayscale } from "./pkg/my_wasm.js";

await init();
console.log(fibonacci(40));  // 比 JS 快 10x+

// 图像处理
const ctx = canvas.getContext("2d");
const imgData = ctx.getImageData(0, 0, w, h);
const result = grayscale(imgData.data);
// 应用结果...

WASM 适用场景