避免强制同步布局的关键是切断“读-写-读-写”链式反应：先批量读取（如getBoundingClientRect）再统一写入，或反之；优先用transform/opacity替代left/top/width/height；用requestAnimationFrame延迟读取、缓存高开销API结果。
避免强制同步布局，核心是切断“读-写-读-写”这种浏览器被迫反复计算布局的链式反应。它不单是写法问题，而是对浏览器渲染流水线节奏的理解和尊重。
把读取操作全部集中到写入之前或之后
浏览器在执行 JS 时会缓存样式修改，直到需要准确几何信息时才强制刷新布局。一旦你在改完样式后立刻读 offsetTop、clientWidth、getComputedStyle 等，就会触发同步重排。
- ❌ 错误：边改边读（循环里每次先设 style.left，再读 offsetLeft）
- ✅ 正确：先批量读取所有需要的尺寸（如用 getBoundingClientRect() 一次性拿 top/left/width/height），再统一写入样式
- ✅ 或者反过来：先批量写入所有样式变更，等全部完成后再统一读取——但注意，此时读的是“下一次布局后的值”，需结合场景判断是否合理
用 transform 和 opacity 替代位置与尺寸变更
修改 left/top/width/height 会直接改变元素在文档流中的几何属性，必然触发重排；而 transform（如 translateX、scale）和 opacity 只影响合成层，跳过布局和绘制阶段，由 GPU 加速处理。
- 动画优先用 requestAnimationFrame + transform，而不是 setInterval + top/left
- 切换显示状态时，用 opacity: 0 + pointer-events: none，比 display: none 更利于复用渲染管线
- 需要隐藏元素做批量操作？临时设 visibility: hidden 比 display: none 更轻量（仍占布局空间，但不触发布局重算）
用 requestAnimationFrame 延迟读取到下一帧
当必须在样式更新后获取最新布局信息（比如动画起始位置），又不想打断当前帧，可以把读取逻辑放到 requestAnimationFrame 回调里——它会在浏览器下一次重排前执行，自然避开强制同步。
立即学习“Java免费学习笔记（深入）”；
- element.style.transform = 'translateX(100px)';
- requestAnimationFrame(() => { console.log(element.getBoundingClientRect()); });
- 适合 scroll、resize 等高频事件中需要响应尺寸变化的场景
缓存结果，别重复调用高开销方法
getComputedStyle、getBoundingClientRect、offsetHeight 这类 API 不是普通属性访问，每次调用都可能触发样式计算甚至重排，尤其在循环或动画帧中反复调用非常危险。
- 把 getBoundingClientRect() 结果存成变量，后续直接用 top/left/width 等字段
- 避免在 for 循环里对同一元素多次调用 getComputedStyle()
- 若需监听尺寸变化，考虑 ResizeObserver，它异步通知且不阻塞主线程
