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

① CPU 使用率顶部波形波峰高 CPU 繁忙拖拽时如果一直是高峰说明有大量计算在跑。② Frames 行最重要绿色条 该帧流畅红色条 掉帧。你上次测试优化前有密集红色优化后红色减少这就是最直观的性能证据。悬停到某一帧上可以看到具体 fps 数值。③ 主线程火焰图黄色Scripting JS 执行耗时是markRaw优化的直接作用区域。紫色Rendering 样式计算和布局Vue 响应式触发的重排会体现在这里。块越宽说明耗时越长优化后两者都应该变窄。④ Summary 汇总是整段录制的总耗时统计你之前对比的 Scripting 从 3498ms 降到 3304ms 就是在这里看的。INP 是交互响应延迟你的数据从 184ms 降到 130msGoogle 标准 ≤200ms 为良好所以两个都在绿色区间内优化后更稳。做性能对比记住这个顺序先看 Frames 行有没有红色 → 再看 Summary 里 Scripting 耗时变化 → 最后看 INP 值。这三个指标基本能说清楚 90% 的渲染性能问题。