强制同步布局

定义

强制同步布局（Forced Synchronous Layout，也称 Layout Thrashing 布局抖动）指 JavaScript 在同一帧内先修改样式或 DOM，随后立即读取 offsetWidth、getBoundingClientRect 等依赖布局的属性，迫使浏览器放弃批量优化、立刻同步计算布局的现象。

原理

浏览器通常将样式修改累积起来，在帧的渲染阶段统一计算布局。但布局属性的读取必须返回最新值：若此前存在未落地的样式改动，引擎只能中断脚本先做一次布局。在循环中交替「写—读」会触发多次布局，造成明显卡顿。

示例

``js // 反模式：每次循环都强制布局 for (const el of items) { el.style.width = box.offsetWidth + 'px'; } ``

规避方法

• 先集中读取，再集中写入（读写分离）；
• 缓存布局值，避免重复查询；
• 用 requestAnimationFrame 安排写操作；
• 使用 FastDOM 等库自动调度读写批次。

开发者工具的性能面板会以紫色警告标记此类布局事件，是定位滚动与动画卡顿的常见线索。