Performance 面板结构总览逐区域解释

① CPU 使用率（顶部波形）
波峰高 = CPU 繁忙，拖拽时如果一直是高峰说明有大量计算在跑。

② Frames 行（最重要）
绿色条 = 该帧流畅，红色条 = 掉帧。你上次测试优化前有密集红色，优化后红色减少，这就是最直观的性能证据。悬停到某一帧上可以看到具体 fps 数值。

③ 主线程火焰图
黄色（Scripting）= JS 执行耗时，是markRaw优化的直接作用区域。紫色（Rendering）= 样式计算和布局，Vue 响应式触发的重排会体现在这里。块越宽说明耗时越长，优化后两者都应该变窄。

④ Summary 汇总
是整段录制的总耗时统计，你之前对比的 Scripting 从 3498ms 降到 3304ms 就是在这里看的。INP 是交互响应延迟，你的数据从 184ms 降到 130ms，Google 标准 ≤200ms 为良好，所以两个都在绿色区间内，优化后更稳。

做性能对比，记住这个顺序：先看 Frames 行有没有红色 → 再看 Summary 里 Scripting 耗时变化 → 最后看 INP 值。这三个指标基本能说清楚 90% 的渲染性能问题。