如何逐步暂停CSS渲染，排查页面加载时元素移位问题？

• 用Performance面板精准定位移位时机
  打开DevTools（F12/右键检查），切换到Performance面板，勾选「Screenshots」和「Paint」选项，点击录制按钮后刷新页面。录制完成后，通过时间轴上的连续截图帧找到移位发生的精确时间点，对应查看下方的「Layout」事件列表，能直接看到哪些元素触发了重排（reflow），以及触发重排的CSS规则来源。

• 追踪元素样式的动态变更
  在元素面板选中移位的目标元素，切换到「Styles」标签，点击右上角的「Changes」按钮，该功能会记录页面加载过程中该元素的所有样式变更，包括哪些CSS选择器在什么时候覆盖了默认样式。另外，在「Computed」面板中，将鼠标悬停在属性值上，可查看最终生效的CSS选择器，对比页面初始加载时的默认样式状态。

• 排查异步加载的样式表影响
  若页面存在异步加载的样式表，可在Network面板勾选「Disable cache」，找到目标样式表后右键选择「Block request」临时禁用，观察移位是否消失，以此排查是否是晚加载的样式导致元素位置突变。也可在Performance面板的「Resource Loading」时间线中，对比样式表加载完成时间与移位发生时间的对应关系。

• 用DOM断点锁定尺寸/位置变化触发点
  在元素面板选中移位元素，右键选择「Break on」→「Element size changes」（Chrome浏览器原生支持），刷新页面后，当元素尺寸或位置发生变化时，DevTools会自动暂停执行。此时查看调用栈和当前生效的样式规则，就能直接定位触发变更的具体原因。

内容的提问来源于stack exchange，提问作者Ryan Germann