Chrome DevTools Performance面板用于捕获分析页面性能，需无痕模式启动并勾选Screenshots；时间轴分概览区（FPS/CPU/内存）、主轨道区（Main/Compositor/Raster/GPU）和摘要区（任务耗时占比）；结合Network和Memory面板交叉验证可精准定位首屏慢、卡顿、响应延迟及内存泄漏等问题。
打开 Chrome DevTools 后，进入 Performance 面板，点击录制按钮（●）开始捕获页面运行时性能数据，停止后即可查看完整的分析视图。关键不是“点开就完事”，而是理解时间轴上各层含义、识别瓶颈位置。
一、正确启动性能录制
避免插件干扰和缓存影响，建议：
- 用无痕模式（Incognito）打开目标页面
- 按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）打开 DevTools
- 切换到 Performance 标签页
- 勾选 Screenshots（截图），便于回看帧变化
- 点击顶部圆形录制按钮 ●，操作页面几秒后点击 ● 停止
二、看懂时间轴上的核心区域
录制结束后，界面分为三大部分，重点关注：
- 顶部概览区：显示 FPS（帧率）、CPU 使用率、网络活动、内存（JS Heap）随时间变化的曲线。FPS 持续低于 60 表明动画卡顿；内存曲线持续上升且不回落，可能有内存泄漏
-
中间主轨道区：横向是时间线，纵向分多个线程轨道，包括：
– Main（主线程）：执行 JS、样式计算、布局、绘制等，红色长条常表示强制同步布局（Layout Thrashing）
– Compositor（合成线程）：负责图层合成，若此处频繁阻塞，说明渲染管线受阻
– Raster 和 GPU：反映光栅化与 GPU 加速是否正常启用 - 底部摘要区（Summary）：统计所有任务类型耗时占比，比如 Scripting、Rendering、Painting、Garbage Collection 等，能快速定位耗时大户
三、定位常见性能问题
结合交互行为，针对性排查：
- 首屏慢？ 查 Timings 轨道中的 FCP（首次内容绘制）、LCP（最大内容绘制）时间点，再回溯该时刻 Main 线程是否被长任务阻塞
- 滚动/动画卡顿？ 观察 FPS 曲线是否频繁掉帧，展开对应时间段的 Main 轨道，找超过 16ms 的长任务（黄色或红色块），检查是否在 scroll 或 animation callback 中做了过多计算或 DOM 操作
- 点击无响应？ 在 Interactions 轨道找到对应点击事件，看从输入到反馈之间是否有长任务排队，或是否存在未优化的事件监听器（如未节流的 resize/mousemove）
- 内存持续增长？ 勾选 Memory 复选框，观察 JS Heap 曲线。若多次操作后堆内存不回收，可点击某个时间点，右键选择 Take Heap Snapshot 对比对象引用
四、配合 Network 和 Memory 面板交叉验证
Performance 提供的是“发生了什么”，而其他面板解释“为什么发生”：
- 在 Performance 中发现某段 JS 执行耗时高 → 切换到 Network 面板，确认该脚本是否体积过大、是否被压缩、是否启用了缓存
- 发现内存异常增长 → 切换到 Memory 面板，录制内存分配时间线（Allocation instrumentation on timeline），定位哪些对象在频繁创建却未释放
- 想验证优化效果？重复录制对比：优化前/后同一操作的 FPS、长任务数量、内存峰值等指标
不复杂但容易忽略——真正有用的不是跑一次报告，而是带着问题去录、对照着指标去查、结合多个面板去印证。
