一、用优化（Release）构建

⚡ 务必在做性能测量前使用 优化模式 构建你的 WASM。默认情况下：

• wasm-pack build → Release + 优化
• wasm-pack build --dev 或 cargo build → Debug，性能大打折扣

优化编译能开启 LLVM 的各项优化和 LTO，生成的机器码才反映真实运行速度。否则，测得的时间只是一份 Debug 二进制在做「慢动作表演」。

二、性能计时：performance.now()

浏览器端最基本的高精度计时器就是 performance.now()，它返回自页面加载以来的毫秒浮点时间，精度可达微秒级。

2.1.Rust 调用示例

use wasm_bindgen::prelude::*;
use web_sys::window;fn now_ms() -> f64 {window().and_then(|w| w.performance()).map(|perf| perf.now()).expect("Performance should be available")
}#[wasm_bindgen]
pub fn heavy_compute(n: u32) -> f64 {let start = now_ms();let mut acc = 0;for i in 0..n {acc = acc.wrapping_add((i as u64).wrapping_mul(31)) as u32;}let elapsed = now_ms() - start;// 返回耗时，用 JS 拿到并打印elapsed
}

• 优点：调用开销极低，可在热循环内多次采样，追踪细粒度性能。
• 注意：在 Release 模式下测量，保证测得的时间不被 Debug 或符号信息影响。

三、console.time / console.timeEnd

当你希望在控制台直观地看到某一步骤的耗时，console.time 系列 API 非常好用。它会在 Console 中打印类似：

some task: 12.34ms

3.1.Rust 调用示例

use wasm_bindgen::prelude::*;
use web_sys::console;#[wasm_bindgen]
pub fn profile_task(n: u32) {console::time_with_label("compute");        // 标记开始let mut acc = 0;for i in 0..n {acc = acc.wrapping_mul(31).wrapping_add(i);}console::time_end_with_label("compute");     // 标记结束并输出
}

在浏览器 DevTools 的 Console 面板，你会看到：

compute: 5.67ms

同时，这些日志也会出现在 Performance Timeline（瀑布流/水波图）中，帮助你对齐其他事件。

四、浏览器 Profiler（火焰图 & 调用树）

现代浏览器（Chrome、Firefox、Edge）内建的 性能分析工具，可以录制一段时间范围内的所有 JS + WASM 调用，生成：

• 火焰图（Flame Chart）：以时间为横轴，调用栈深度为纵轴，高亮最耗时函数。
• 调用树（Call Tree）：聚合各函数调用总时长，便于定位热点。

4.1.使用建议

1. 上传 Release 并带符号
   在 Cargo.toml 中确保 profile.release.debug = true，使浏览器能显示 Rust 函数名，而非 wasm-function[123]。
2. 短录制
   只选取热点操作的时段（几百 ms），太长会生成巨量数据。
3. 看 Inlined 函数
   由于 Rust/LLVM 广泛自动内联，Profiler 可能无法拆分内联逻辑，只能看到调用者“成片”耗时。

五、#[bench] 与 Native Profilers

在投入大量时间调优之前，先确认瓶颈确实在WASM，而不是 JS 或 DOM。最直接的方式是：

1. 本地写 #[bench]

   • 在 benches/ 目录下创建基准测试。
   • cargo bench 用系统最成熟的分析工具测出函数耗时。

2. 使用 OS Profiler

   • Linux 下的 perf、macOS 下的 Instruments、Windows 下的 Windows Performance Recorder。
   • 用它们分析本地 rlib 中的函数执行成本。

警告：千万不要在未确认热点在 WASM 侧时，就开始针对 Release WASM 进行繁重优化——可能前端异步逻辑、内存分配或网络才是瓶颈。

六、测一段计算密集型函数

1. Rust 代码（src/lib.rs）：

   use wasm_bindgen::prelude::*;
   use web_sys::console;fn now() -> f64 {web_sys::window().unwrap().performance().unwrap().now()
   }#[wasm_bindgen]
   pub fn crunch(n: u32) {let t0 = now();let mut x = 1u64;for i in 0..n {x = x.wrapping_mul(6364136223846793).wrapping_add(1);}let t1 = now();console::log_1(&format!("crunch({}) = {} in {:.2} ms", n, x, t1 - t0).into());
   }
   

2. 构建：

   wasm-pack build --release
   

3. 在页面调用：

   <script type="module">import init, { crunch } from "./pkg/my_wasm.js";async function run() {await init();crunch(10_000_000);}run();
   </script>
   

4. 查看结果
   Console 中将打印：

   crunch(10000000) = 1234567890123456 in 45.67 ms
   

   随后可在 Profiler 中重点关注该函数位置。

七、性能剖析最佳实践小结

• 始终用 Release + debug 符号 构建，保证真实性能与可读堆栈。
• 从粗到细：先用浏览器 Profiler 定位大热点，再用 performance.now() 或 console.time 做微调。
• 本地测试优先：若可在纯 Rust 单元测试中复现，优先用 #[bench] + OS 工具剖析。
• 控制样本长度：录制短时段、少量迭代，避免数据量过大。
• 关注内联：内联会让火焰图“融合”，必要时在 Rust 侧加 #[inline(never)] 强制不内联。
• 对比优化前后：每次做修改后都要重新构建并测量，避免“盲目优化”。

通过以上方法，你可以在 Rust→WASM 的代码中快速发现并修复性能瓶颈，确保在浏览器端获得最佳的吞吐与最低的延迟。祝你的 WebAssembly 应用越来越飞快！