浏览器中的 Wasm 性能分析

Chrome DevTools 中的 Wasm 调试

启用 Wasm 调试

Chrome 90+ 内置了对 WebAssembly 的调试支持。只要 .wasm 文件附带了 DWARF 调试符号（由 Rust 的 debug build 或 Emscripten 的 -g 选项生成），Chrome DevTools 就能显示原始源码，而不是 WAT 字节码。

# Rust：debug build 自动包含调试信息
wasm-pack build --dev --target web

# Emscripten：添加 -g 标志
emcc hello.c -g -o hello.js -s WASM=1

性能对比实验

// 对比 JS vs Wasm 的数值计算性能

// 纯 JS 实现：计算 n 以内所有素数
function sieveJS(n) {
  const isPrime = new Uint8Array(n + 1).fill(1);
  isPrime[0] = isPrime[1] = 0;
  for (let i = 2; i * i <= n; i++) {
    if (isPrime[i]) {
      for (let j = i * i; j <= n; j += i) isPrime[j] = 0;
    }
  }
  return isPrime.reduce((acc, v) => acc + v, 0);
}

// 性能测试
const N = 10_000_000;

console.time('JS sieve');
sieveJS(N);
console.timeEnd('JS sieve');   // 约 80ms

// 加载 Wasm 版本（Rust 实现）
const wasm = await import('./pkg/primes.js');
await wasm.default();

console.time('Wasm sieve');
wasm.sieve(N);
console.timeEnd('Wasm sieve');  // 约 15ms（快约 5x）

避免 JS↔Wasm 频繁跨越

// 不好的做法：逐元素调用 Wasm
for (const pixel of pixels) {
  processedPixels.push(wasmModule.processPixel(pixel));  // 百万次跨越！
}

// 好的做法：批量处理
const inputView = new Uint8Array(wasmMemory.buffer, inputOffset, pixels.length);
inputView.set(pixels);  // 零拷贝写入
wasmModule.processAllPixels(inputOffset, pixels.length);  // 一次跨越
const outputView = new Uint8Array(wasmMemory.buffer, outputOffset, pixels.length);

Chrome DevTools Wasm 调试深度指南

DWARF 调试符号

要在 Chrome DevTools 中看到原始 Rust/C++ 源码（而不是 WAT 或十六进制），需要 DWARF 调试符号。这些符号嵌入在 .wasm 文件的自定义 Section 中（或外部 .wasm.map 文件中）。

在 Chrome DevTools 中调试 Wasm

# 1. 安装 Chrome DevTools C++ 扩展（支持 DWARF）
# 在 Chrome 扩展商店搜索 "C/C++ DevTools Support (DWARF)"

# 2. Rust：使用 debug build（自动包含 DWARF 符号）
wasm-pack build --dev --target web

# 3. 分离调试符号（发布时减小体积）
# 生产版：去掉调试符号
wasm-pack build --release --target web
# 单独保存调试版供开发使用
wasm-pack build --dev --target web -d pkg-dev

# 4. Emscripten：生成调试信息
emcc -g -gseparate-dwarf=hello.wasm.debug hello.c -o hello.js

Memory 面板检查 Wasm 内存

// 在 Chrome DevTools Console 中检查 Wasm 内存
// 先获取实例的内存引用：
const { instance } = await WebAssembly.instantiateStreaming(fetch('./module.wasm'));
// 在 DevTools → Memory 面板中，可以直接检查 Wasm 内存的原始字节
// 或者通过 TypedArray 在控制台查看：
const view = new Uint8Array(instance.exports.memory.buffer);
console.log(view.slice(0, 64));  // 查看前 64 字节

Wasm 性能分析实战：找到真正的瓶颈

常见的 Wasm 性能误区

Wasm SIMD：向量化计算

什么是 SIMD？

SIMD（Single Instruction Multiple Data，单指令多数据）允许一条指令同时处理多个数据。Wasm SIMD 引入了 v128 类型（128 位向量），可以表示：4 个 f32、2 个 f64、4 个 i32、8 个 i16 等。

// Rust 中使用 SIMD 加速图像处理
use wasm_bindgen::prelude::*;

#[cfg(target_arch = "wasm32")]
use std::arch::wasm32::*;  // Wasm SIMD 内置函数

#[wasm_bindgen]
pub fn grayscale_simd(data: &mut [u8]) {
    // 每次处理 4 个像素（4 × RGBA = 16 字节）
    for chunk in data.chunks_exact_mut(16) {
        // 加载 16 字节到 v128 向量寄存器
        let pixels = unsafe { v128_load(chunk.as_ptr() as *const v128) };

        // 同时处理 4 个像素的 R 通道（偏移 0、4、8、12）
        // SIMD 版本相比标量版本快约 4x
        // 实际 SIMD 实现较复杂，这里展示思路
        let _ = pixels;  // 简化示例
    }
    // 处理剩余不足 16 字节的部分（标量）
}

// 检测 SIMD 支持
#[wasm_bindgen]
pub fn check_simd_support() -> bool {
    // 编译时特性检测
    #[cfg(target_feature = "simd128")]
    { return true; }
    false
}

性能分析：Chrome Performance 面板

使用 User Timings 精确测量

// 使用 Performance API 创建可在 DevTools 中查看的自定义时间点

async function benchmarkWasm(wasmFn, jsFn, input, rounds = 5) {
  const results = { wasm: [], js: [] };

  for (let i = 0; i < rounds; i++) {
    // Wasm 测量
    performance.mark(`wasm-start-${i}`);
    wasmFn(input);
    performance.mark(`wasm-end-${i}`);
    performance.measure(`Wasm Round ${i}`, `wasm-start-${i}`, `wasm-end-${i}`);
    results.wasm.push(performance.getEntriesByName(`Wasm Round ${i}`)[0].duration);

    // JS 测量
    performance.mark(`js-start-${i}`);
    jsFn(input);
    performance.mark(`js-end-${i}`);
    performance.measure(`JS Round ${i}`, `js-start-${i}`, `js-end-${i}`);
    results.js.push(performance.getEntriesByName(`JS Round ${i}`)[0].duration);
  }

  // 计算中位数（比均值更能反映典型性能，去掉 JIT 热身影响）
  const median = arr => {
    const sorted = [...arr].sort((a, b) => a - b);
    return sorted[Math.floor(sorted.length / 2)];
  };

  console.log(`Wasm 中位数: ${median(results.wasm).toFixed(2)}ms`);
  console.log(`JS 中位数:   ${median(results.js).toFixed(2)}ms`);
  console.log(`加速比: ${(median(results.js) / median(results.wasm)).toFixed(1)}x`);
}

JS↔Wasm 跨越开销量化

本章小结