Chrome DevTools 定位高频重排的核心是识别不该频繁发生的重排被反复触发；通过Rendering面板监控布局偏移、FPS及重绘闪烁，结合Performance面板筛选Layout事件并分析触发原因，重点排查JavaScript强制同步布局和CSS属性变更引发的连锁重排。
Chrome DevTools 定位高频重排（Layout）导致的性能问题，核心是捕获并分析页面渲染流水线中 Layout 阶段的异常调用频率和耗时。关键不在于“看到重排”，而在于识别“不该频繁发生的重排被反复触发”。
开启 Rendering 面板监控重排节奏
在 DevTools 中按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac）打开命令菜单，输入 Rendering 并选择「Show Rendering」。勾选：
- Layout Shift Regions：高亮布局偏移区域（辅助判断视觉不稳定是否由意外重排引起）
- FPS Meter：观察帧率波动，若持续低于 50–60 FPS 且伴随 Layout 耗时上升，需深入排查
- Paint flashing：虽主要用于重绘，但频繁闪烁区域常与重排源头（如尺寸依赖的 DOM 变更）相关联
用 Performance 面板录制并筛选 Layout 事件
切换到 Performance 标签页，点击录制按钮（●），复现疑似卡顿操作（如滚动、输入、动画开始），停止后展开火焰图：
- 在底部 Bottom-Up 或 Call Tree 视图中，筛选关键词 Layout 或 Recalculate Style
- 重点关注：Layout 出现次数是否远高于预期（例如每帧多次）、单次耗时是否 > 16ms（影响 60fps）、是否集中在某段 JS 执行后立即触发
- 点击某次 Layout 事件，在右侧 Summary 面板查看「Layout reason」——常见触发原因如：style request（读取 offsetTop/scrollHeight 等）、forced synchronous layout（强制同步布局）
定位 JavaScript 中的强制同步布局（FSL）
这是高频重排最常见根源：在修改样式后，立刻读取几何属性，迫使浏览器提前执行 Layout。
- 在 Performance 录制结果中，查找 Layout 前紧邻的 JS 调用栈，看是否含 offsetHeight、getBoundingClientRect()、scrollLeft、computedStyle 等读取操作
- 典型错误模式：
el.style.height = '200px'; console.log(el.offsetHeight);→ 修改后立即读取，触发同步 Layout - 修复建议：批量读取放在所有写操作之后；或用 requestAnimationFrame 分离读写；或改用 CSS 自适应方案（如 flex/grid）避免 JS 查询尺寸
检查 CSS 属性变更是否引发连锁重排
某些 CSS 更改会隐式触发 Layout，尤其涉及尺寸、位置、盒模型的属性：
- 避免在动画中修改 width/height/top/left/margin/padding 等触发 Layout 的属性；优先使用 transform 和 opacity（仅触发合成）
- 检查是否存在大量 float、table-layout: auto、inline-block + 白空间换行 等易导致重排扩散的布局方式
- 在 Elements 面板中右键元素 → Force element state → 模拟 hover/focus，观察是否意外触发 Layout（说明伪类样式含危险属性）
