布局抖动是JavaScript频繁交替读写DOM几何属性（如offsetWidth、getBoundingClientRect）导致浏览器反复强制同步布局，引发重排卡顿；应批量读取后统一写入，并用requestAnimationFrame对齐渲染节奏，优先使用transform/opacity等合成层属性。
减少页面布局抖动（Layout Thrashing）是提升渲染流畅度最直接有效的手段之一。它本质是避免浏览器在一次任务中反复读取布局信息又立即修改样式，从而触发多次不必要的重排（reflow），拖慢主线程、掉帧甚至卡顿。
什么是布局抖动
布局抖动发生在 JavaScript 中“读—写—读—写”交错操作 DOM 几何属性时。例如：获取 offsetWidth 后立刻设置 style.width，浏览器必须同步计算当前布局（强制同步布局），再应用新样式、再次计算……循环往复。每一次读取都可能触发重排，尤其在循环中会指数级放大开销。
如何识别布局抖动
Chrome DevTools 的 Performance 面板可清晰捕获强制同步布局事件（标记为 Layout 或 Forced Synchronous Layout）。高频出现、集中在某段 JS 执行期间，基本可判定为布局抖动。
- 常见触发 API：offsetTop/offsetLeft/offsetHeight/offsetWidth、getBoundingClientRect()、scrollHeight/scrollWidth、clientTop/clientLeft 等
- 典型场景：滚动监听中动态调整元素尺寸、列表项逐个测量再定位、动画帧内混合读写
批量读写，切断抖动链
核心原则是：把所有读取操作集中前置，所有写入操作统一后置，中间不穿插。
- ❌ 错误写法（循环中读写交错）：
for (let i = 0; i els[i].style.left = els[i].offsetLeft + 10 + 'px';<br>}
- ✅ 正确写法（先读后写）：
const positions = els.map(el => el.offsetLeft);<br>els.forEach((el, i) => {<br> el.style.left = positions[i] + 10 + 'px';<br>});
用 requestAnimationFrame 对齐渲染节奏
即使做了读写分离，若样式更新发生在非渲染时机，仍可能错过帧或引发额外布局。使用 requestAnimationFrame 把写操作安排在下一次重绘前，确保与屏幕刷新率（60Hz）同步。
- 将样式变更包裹在 rAF 回调中，避免被浏览器合并或延迟
- 适合动画、滚动响应、动态尺寸适配等需要视觉连续性的场景
- 示例：
requestAnimationFrame(() => {<br> el.style.transform = `translateX(${x}px)`;<br>});
用合成层属性绕过布局计算
对频繁变化的属性，优先选用不触发重排重绘的 CSS 属性，让浏览器走合成（Compositing）通路：
- 推荐属性：transform（尤其是 translate3d）、opacity、filter
- 配合 will-change: transform 提前告知浏览器该元素将动画，有助于提前创建合成层
- 避免用 top/left/width/height 做动画——它们直接参与布局，必然重排
