Chrome DevTools Performance面板需规范操作才能准确定位性能问题：隐身模式禁缓存、CPU节流4x、勾选Screenshots和Memory、录制4–6秒，火焰图中>50ms宽条为长任务，结合FPS/CPU/内存三轨联动分析。
Chrome DevTools 的 Performance 面板不是“点开就看懂”的工具，而是需要配合合理设置、规范操作和结构化解读才能准确定位卡顿、掉帧或响应延迟的根源。关键不在录得多，而在录得准、看得清、判得对。
启动前先清干扰：隐身模式 + 关闭缓存
插件、扩展、本地缓存都可能掩盖真实性能问题。务必在隐身窗口中打开目标页面，并在 Network 面板勾选 Disable cache。这样能确保每次录制反映的是页面原始行为，而非被缓存或插件加速后的假象。
录制时模拟真实瓶颈：CPU 节流 + 截图 + 内存追踪
高性能电脑上跑得流畅，不等于用户手机上也流畅。点击右上角 ⚙️ 进入 Capture Settings 后，做三件事：
- 选择 4x slowdown（比 2x 更贴近主流安卓机，6x 适合极端弱机场景）
- 勾选 Screenshots——可直观比对卡顿时的帧画面与正常帧差异
- 勾选 Memory——同步记录堆内存曲线，便于后续判断是否伴随内存持续增长
录制时长控制在 4–6 秒，覆盖一次完整交互（如滚动到底、点击提交、动画播放），避免过短漏关键帧、过长混杂无关噪声。
火焰图里找“宽条”：50ms 是卡顿分水岭
停止录制后，火焰图（Flame Chart）是核心分析视图。主线程上横向宽度超过 50ms 的黄色/红色区块，就是长任务（Long Task）——它直接阻塞页面响应，是导致卡顿的首要嫌疑。
- 拖动鼠标框选一段高密度宽条区域，时间轴会自动缩放聚焦
- 切换到下方 Call Tree 标签页，按 Self Time 降序排列
- 展开耗时最高的函数，逐级下钻，最终定位到具体 JS 行号或第三方库方法名
注意区分：Layout（重排）、Recalculate Style（重绘计算）、Paint（绘制）连续出现，说明存在布局抖动（Layout Thrashing）；Scripting 占比过高，则需检查循环、未节流事件或同步 DOM 操作。
概览区交叉验证：FPS、CPU、内存三轨联动
顶部概览区的三条轨道不是孤立指标：
- FPS 轨道出现红色竖条 → 当前帧耗时 >16.7ms，已掉帧
- CPU 轨道紫色（Rendering）或黄色（Scripting）持续高位 → 渲染或脚本执行过载
- Memory 轨道呈阶梯式上升且不回落 → 存在内存泄漏风险（尤其在重复操作后）
把掉帧时刻与主线程中对应宽条、内存突增点对齐，就能确认是 JS 执行拖慢了渲染，还是样式计算阻塞了帧生成，或是内存膨胀间接引发 GC 停顿。
