WebAssembly 前端工程化实践：编译链、性能对比与混合架构

WASM 模块结构：
┌─────────────────────────────────────────┐
│  Module（编译后的 .wasm 文件）            │
│  ├── Type Section    — 函数签名定义      │
│  ├── Import Section  — 从 JS 导入函数    │
│  ├── Function Section— 内部函数列表      │
│  ├── Memory Section  — 线性内存（可增长）│
│  ├── Export Section  — 导出给 JS 的函数  │
│  ├── Code Section    — 函数指令（opcodes）│
│  └── Data Section    — 初始化数据        │
└─────────────────────────────────────────┘

运行时需要提供：
  - Import Object（JS 函数/内存/Table）
  - 线性内存（SharedArrayBuffer）
  - Stack 管理

// WASM 使用一块连续的 ArrayBuffer 作为内存
const memory = new WebAssembly.Memory({
  initial: 256,  // 初始 256 * 64KB = 16MB
  maximum: 512   // 最大 32MB
});

// JS 可以读写这块内存
const bytes = new Uint8Array(memory.buffer);
bytes[0] = 72;  // 'H'
bytes[1] = 105; // 'i'

# 安装工具链
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

# 创建 WASM 项目
cargo new --lib wasm-image-filter
cd wasm-image-filter

# Cargo.toml
[package]
name = "wasm-image-filter"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
console_error_panic_hook = "0.1"

# 图像处理库
image = { version = "0.24", default-features = false, features = ["png", "jpeg"] }

[dependencies.web-sys]
version = "0.3"
features = ["console"]

[profile.release]
opt-level = 3
lto = true          # Link-time optimization
panic = "abort"     # 移除 panic 处理代码

// src/lib.rs
use wasm_bindgen::prelude::*;
use image::{ImageBuffer, Rgba};

#[wasm_bindgen]
pub fn apply_grayscale(data: &[u8], width: u32, height: u32) -> Vec<u8> {
    let mut img = ImageBuffer::<Rgba<u8>, _>::from_raw(width, height, data.to_vec())
        .expect("Invalid image data");

    for pixel in img.pixels_mut() {
        let Rgba([r, g, b, a]) = *pixel;
        let gray = ((r as u16 + g as u16 + b as u16) / 3) as u8;
        *pixel = Rgba([gray, gray, gray, a]);
    }

    img.into_raw()
}

#[wasm_bindgen]
pub fn resize_image(data: &[u8], orig_w: u32, orig_h: u32, new_w: u32, new_h: u32) -> Vec<u8> {
    let img = ImageBuffer::<Rgba<u8>, _>::from_raw(orig_w, orig_h, data.to_vec())
        .expect("Invalid image data");

    let resized = image::imageops::resize(
        &img,
        new_w,
        new_h,
        image::imageops::FilterType::Lanczos3
    );

    resized.into_raw()
}

# 编译为 WASM（三种模式）
wasm-pack build --target web      # 浏览器 ESM
wasm-pack build --target bundler  # Webpack/Vite（默认）
wasm-pack build --target nodejs   # Node.js

# 产出：
# pkg/
# ├── wasm_image_filter.js      — JS胶水代码
# ├── wasm_image_filter_bg.wasm — WASM 二进制
# └── package.json

// 方式1：直接 ESM 导入（Vite/webpack 5）
import init, { apply_grayscale, resize_image } from './pkg/wasm_image_filter';

async function processImage(file: File) {
  await init(); // 初始化 WASM 模块

  const buffer = await file.arrayBuffer();
  const data = new Uint8Array(buffer);

  // 假设输入是 1920x1080 RGBA
  const grayscaleData = apply_grayscale(data, 1920, 1080);
  const resizedData = resize_image(data, 1920, 1080, 800, 450);

  return new ImageData(new Uint8ClampedArray(resizedData), 800, 450);
}

<!-- 方式2：原生 Web API（无打包器） -->
<script type="module">
  const response = await fetch('./pkg/wasm_image_filter_bg.wasm');
  const bytes = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(bytes, {
    env: { memory: new WebAssembly.Memory({ initial: 256 }) }
  });

  const applyGray = instance.exports.apply_grayscale;
  // ... 调用
</script>

// main.go
package main

import "syscall/js"

func add(this js.Value, args []js.Value) interface{} {
    return args[0].Int() + args[1].Int()
}

func main() {
    c := make(chan struct{}, 0)
    js.Global().Set("goAdd", js.FuncOf(add))
    <-c
}

GOOS=js GOARCH=wasm go build -o main.wasm

// assembly/index.ts
export function fibonacci(n: i32): i32 {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

export function add(a: i32, b: i32): i32 {
  return a + b;
}

npm install -g assemblyscript
asc assembly/index.ts -b build/optimized.wasm -O3

// Rust 端
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// wasm-bindgen 自动生成 JS 胶水：
// - 将 JS string → UTF-8 写入 WASM 内存
// - 调用 Rust 函数
// - 从 WASM 内存读取 UTF-8 → JS string

// ❌ 低效：数据在 JS 和 WASM 之间复制
const result = wasmProcess(jsArray); // 复制进去 → 处理 → 复制出来

// ✅ 高效：共享同一块内存
const memory = wasmModule.exports.memory;
const jsArray = new Uint8Array(memory.buffer, wasmPtr, length);
// 修改 jsArray 就是在修改 WASM 内存
wasmProcessInPlace(ptr, length); // 无需复制！

// 流式编译：边下载边编译，减少启动延迟
const response = await fetch('./module.wasm');

// 方式1：Streaming 编译（推荐）
const { instance } = await WebAssembly.instantiateStreaming(response, imports);

// 方式2：传统方式（先下载完整文件）
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes, imports);

// main.js
const worker = new Worker('worker.js');

// 创建共享内存
const sharedMemory = new WebAssembly.Memory({
  initial: 256,
  maximum: 512,
  shared: true  // 关键！
});

worker.postMessage({ memory: sharedMemory, wasmModule });

// worker.js
self.onmessage = async (event) => {
  const { memory, wasmModule } = event.data;

  const instance = await WebAssembly.instantiate(wasmModule, {
    env: { memory }
  });

  // 多个 Worker 操作同一块内存，用 Atomics 同步
  Atomics.add(new Int32Array(memory.buffer), 0, 1);
};

cargo add wasm-bindgen-rayon

use rayon::prelude::*;

#[wasm_bindgen]
pub fn parallel_sum(data: &[i32]) -> i32 {
    data.par_iter().sum()
}

用户上传图片
    ↓
[WASM] 解码 (image-rs) → 处理（滤镜/缩放/压缩） → 编码 (mozjpeg/oxipng)
    ↓
上传到 CDN

优势：比 Canvas API 快 5-10x，支持更专业的编解码器
代表库：squoosh.app（Google Chrome 团队用 Rust WASM 构建）

WASM ffmpeg（ffmpeg.wasm）
├── 浏览器内直接转码、剪辑、合并
├── 无需服务器处理，保护隐私
└── 慢于原生 20-30x，但对短视频可接受

WASM OpenSSL / Ring
├── Argon2 密码哈希（比 JS 快 10x+）
├── AES-GCM 加解密
├── Ed25519 签名验证
└── 密钥派生（PBKDF2 / scrypt）

Rapier（Rust WASM）— 2D/3D 物理引擎，比 matter.js 快 10x+
Figma 使用 WASM 进行矢量渲染
AutoCAD Web 使用 WASM 运行原生 CAD 引擎

Apache Arrow WASM — 列式数据处理
DuckDB WASM — 浏览器内 SQL 分析

WASM + WASI = 跨平台、沙箱化、可移植的服务端运行时

运行环境：
├── wasmtime（Bytecode Alliance，Rust）
├── wasmer
├── Node.js（experiment alwas i）
└── wasmCloud

应用场景：
├── 边缘计算（Cloudflare Workers 已支持 WASM）
├── 插件系统（安全沙箱扩展）
├── 跨语言库复用
└── serverless 冷启动优化