Appearance
强制同步布局：layout thrashing、读写交错与调度规避
主题边界
- 强制同步布局描述的是：浏览器原本可以批量结算的样式和布局，被代码读取布局信息这一动作提前打断。
- 连续的写样式 -> 读布局 -> 再写样式，就是经典的 layout thrashing。
机制与流程
- 当脚本修改样式或 DOM 后，浏览器通常会延后到合适时机统一做 style/layout。
- 如果此时读取
offsetWidth、scrollTop、getComputedStyle()或getBoundingClientRect()等布局相关信息，浏览器往往必须立即刷新前面的更改。 - 把多次写操作批量合并，把读取集中到写入之前或统一时机，是最常见的规避策略。
关键差异
- 普通重排是渲染系统的自然工作，强制同步布局的问题在于它发生在糟糕的时机并反复打断批处理。
requestAnimationFrame适合对齐下一帧前的写入，requestIdleCallback更适合低优先级任务，并不直接替代布局读写管理。
边界条件
- 并不是所有布局读取都会立刻触发强制重排，具体取决于前面是否存在待结算的样式和布局变更。
- 单纯把代码包进
rAF不等于自动避免 thrashing，关键还是读写是否被分离和批量化。
工程落点
- 大列表、虚拟滚动、拖拽、动画和吸顶布局是最容易暴露此类问题的场景。
- 排查时应结合 Performance 面板看长任务与 Layout 事件，而不是只猜 CSS 写法。