核心在于识别本不该高频发生的重排被反复强制触发；需用Rendering面板监控布局偏移、FPS及重绘闪烁，结合Performance面板筛选Layout事件并分析触发原因，重点排查JS强制同步布局和CSS属性变更引发的连锁重排。
前端页面卡顿掉帧，若由频繁重排（Layout）引发，核心在于识别那些本不该高频发生的布局计算被反复强制触发。关键不是“有没有重排”，而是“为什么每帧都在重排”。定位需结合 DevTools 的 Rendering 和 Performance 面板，聚焦 JS 强制同步布局与 CSS 隐式连锁反应。
开启 Rendering 面板观察重排节奏
在 Chrome 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 标签页，勾选 Memory 和 JavaScript samples，点击录制按钮 ●，复现卡顿操作（如滚动、展开、输入），停止后分析火焰图：
- 在 Bottom-Up 或 Call Tree 视图中筛选关键词 Layout 或 Recalculate Style
- 关注单帧内 Layout 是否多次出现、单次耗时是否超 16ms、是否集中在某段 JS 执行之后立即发生
- 点击 Layout 事件，在右侧 Summary 面板查看 Layout reason——最常见的是 style request（读取 offsetTop 等）和 forced synchronous layout
揪出 JavaScript 中的强制同步布局（FSL）
这是高频重排最典型的根源：修改样式后立刻读取几何属性，迫使浏览器中断渲染流程提前执行 Layout。
立即学习“前端免费学习笔记（深入）”；
- 在 Performance 录制结果中，查找 Layout 事件前紧邻的 JS 调用栈，看是否含
offsetHeight、getBoundingClientRect()、scrollLeft、computedStyle等读取操作 - 典型错误模式：
el.style.width = '300px'; console.log(el.offsetWidth);→ 写后立刻读，触发同步 Layout - 修复方向：把所有样式写操作集中完成，再统一读取；或用
requestAnimationFrame分离读写时机；或改用 CSS 弹性方案（如 flex/grid）避免 JS 查询尺寸
检查 CSS 变更是否隐式引发连锁重排
某些 CSS 属性修改会直接触发 Layout，尤其在动画或高频更新场景下极易成为瓶颈：
- 避免在动画中修改
width、height、top、left、margin、padding - 优先使用仅触发改绘（Paint）或合成（Composite）的属性，如
transform、opacity - 对动态尺寸依赖的组件（如虚拟滚动、悬停定位），缓存一次
getBoundingClientRect()结果，后续直接复用
