Chrome DevTools Performance面板通过录制用户操作分析性能，重点关注Loading（绿色）、Scripting（紫色）、Rendering（黄色）、Painting（绿色）阶段，结合FPS、CPU、Network视图定位瓶颈，并用Lighthouse补充Web Vitals量化评估。
Chrome DevTools 的 Performance 面板是分析页面性能最直接有效的工具，核心在于录制真实用户操作流程，再解读关键时间线与指标含义。
录制一次有意义的性能追踪
打开 DevTools（F12 或 Ctrl+Shift+I），切换到 Performance 面板，点击左上角录制按钮（●），或按 Ctrl+E 开始。执行你要分析的操作（比如点击按钮、加载列表、滚动页面），完成后立刻停止录制。
- 确保勾选了 “Screenshots”（截图）选项，便于关联视觉变化和帧率
- 禁用无关扩展，关闭其他标签页，减少干扰
- 在 Network 面板中清空缓存并勾选 “Disable cache”，让录制反映首次加载的真实压力
重点关注顶部时间轴中的关键阶段
录制后，时间轴会显示多个颜色区块，每段代表不同类型的处理任务：
- 绿色（Loading）：网络请求、HTML 解析、CSS 加载与解析，关注长条是否堆积——可能说明资源过多或阻塞渲染
- 紫色（Scripting）：JavaScript 执行（包括事件处理、框架更新、计算逻辑），长时间运行容易导致掉帧
- 黄色（Rendering）：样式计算（Recalculate Style）、布局（Layout）、绘制（Paint），频繁 Layout 尤其伤性能
- 绿色（Painting）：光栅化与合成（Composite），若该阶段占比高，可能是大量图层或复杂 CSS 动画所致
下方面板看具体瓶颈指标
点击时间轴中某一段（如一个长 Scripting 块），下方 Summary 标签页会显示详细调用栈；选择 FPS、CPU、NET 等视图可横向比对：
- FPS 曲线低于 60 表示卡顿，持续低于 30 属严重问题；注意“红色尖峰”对应掉帧时刻
- CPU 占用率长时间接近 100%，说明主线程被 JS 或渲染任务持续霸占
- Network 视图中查看资源加载顺序与耗时，识别阻塞关键渲染路径（CRP）的资源（如未标记
async/defer的 JS） - Bottom-up 或 Call Tree 标签页可定位耗时最高的函数，双击跳转源码行，方便优化
用 Lighthouse 补充量化评估
Performance 面板偏重运行时行为，Lighthouse（Audits 面板）提供标准化评分与改进建议：
- 运行移动端模拟测试，获取 FCP、LCP、CLS、TBT、TTI 等核心 Web Vitals 指标
- 它会自动指出未压缩图片、未预连接 DNS、过大的主包等问题，并给出修复示例
- 建议每次重大改动后都跑一次，对比前后分值变化
