DevTools Layout Shift 调试
用 Performance 和 Rendering 面板定位意外布局偏移，找出导致 CLS 上升的具体元素和时机。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Performance MOC
- 前置概念: CLS, Rendering 面板
- 并列概念: Web Vitals 调试
- 关系笔记: Performance 面板, 页面卡顿排查路线
DevTools Layout Shift 调试
一句话定义
Layout Shift 调试是用 DevTools 找到“页面为什么突然跳了一下”的具体元素和发生时机。
核心内容
常见看法
- 在 Performance 录制里找 Layout Shifts 轨道
- 在 Rendering 里打开可视化辅助
- 对照 Screenshots 看偏移发生前后界面变化
常见元凶
- 图片、广告、iframe 未预留尺寸
- 动态插入内容把已有内容顶走
- 字体切换导致文本重排
边界与易混淆点
- 不是所有布局变化都算问题，用户主动触发的变化要单独判断
- Layout Shift 是症状，真正根因可能在资源加载、组件逻辑或样式策略