关键在于识别本不该高频发生的重排被反复强制触发；通过rendering面板监控布局偏移、fps及重绘闪烁，结合performance面板筛选layout事件并分析触发原因，重点排查js强制同步布局和css属性变更引发的连锁重排。
排查 JavaScript 运行时因频繁重排（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 标签页，勾选 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 等盒模型属性
- 优先使用 transform 和 opacity：它们仅触发合成（Compositing），不走 Layout 流程，由独立线程处理
- 对需动画的元素可加 will-change: transform 提前提示浏览器创建合成层，但避免滥用，防止内存浪费
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
