DevTools 页面卡顿排查路线
按 DevTools 面板协作方式梳理页面卡顿排查路径，覆盖长任务、火焰图、布局偏移、资源阻塞和弱机弱网模拟。
#type / synthesis
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: 浏览器开发者工具 MOC, DevTools Performance MOC, 前端性能优化 MOC
- 相关概念: 火焰图, 长任务调试, Layout Shift 调试, CPU 与 Network Throttling, Waterfall 与 Timing
- 易混淆概念: 页面加载性能排查, 白屏问题诊断
DevTools 页面卡顿排查路线
范围
这条路线处理的是：
- 点击后明显迟钝
- 输入、滚动、切换页面发卡
- 动画掉帧
- 页面“能用但不流畅”
为什么要放在一起理解
“页面卡顿”常常不是单一指标异常，而是多类问题叠加：
- 主线程长任务
- 布局和绘制代价过高
- 资源加载压住交互
- 低性能设备下问题被放大
所以必须把 Performance、Network、Rendering 和代码层一起看。
排查路线
第一步：先在真实交互上录制 Performance
打开 Performance 面板，不要只录空闲页面，要录：
- 真实点击
- 输入
- 滚动
- 切换列表或弹层
第二步：先找最贵的任务
优先看：
先判断卡顿主因更像：
- JS 执行太重
- 布局 / 绘制太重
- 资源等待太长
第三步：如果有跳动和视觉异常，再看 Layout Shift
如果用户说的是“页面跳、抖、位置乱”，补看：
第四步：把链路放回 Network 和设备条件
如果卡顿只在弱网或差设备上明显，就补看：
第五步：最后回源码做精确修复
等知道瓶颈在哪类任务后，再回：
分别处理逻辑、结构和样式层问题。
对比与易混淆点
- 页面卡顿不等于页面加载慢
- 白屏和卡顿不是一回事，但两者都可能由主线程阻塞引起
- 单次录制有偶然性，重点看稳定复现的路径和最贵的任务结构