避免重排抖动的关键是分离读写操作：先批量写DOM（增删节点、改class、设transform/opacity），再统一读尺寸（如getBoundingClientRect）；读写必须分属不同requestAnimationFrame回调，且读操作置于下一次RAF开头。
避免强制同步布局导致的重排抖动，关键不是少读几个属性，而是让浏览器的 layout 计算不被 JS 打断。一旦在单次 JS 执行中交替读写布局相关属性，浏览器就不得不反复 flush 渲染队列，帧率骤降、页面肉眼卡顿。
把“读”和“写”彻底分开
浏览器能批量处理样式变更（写），但只要中间插一次读取（如 offsetHeight、getBoundingClientRect()、getComputedStyle()），就会立刻触发同步 layout，后续所有写操作也被拖进同步路径。
- ✅ 先集中完成所有 DOM 修改：增删节点、改 class、设 style.transform 或 style.opacity
- ✅ 再统一读取所需尺寸：把 getBoundingClientRect()、window.scrollY 等全放在一个地方缓存
- ❌ 不要在 for 循环里每轮都 el.style.left = ... 然后马上 el.offsetTop
用 requestAnimationFrame 控制读取时机
单纯加 setTimeout 或 Promise.resolve() 不够——它们不能保证 layout 已完成。只有 requestAnimationFrame 回调开头，才是浏览器刚做完 layout、尚未开始 paint 的理想窗口。
- 所有写操作放在当前 JS 任务末尾（或 RAF 回调内前半段）
- 所有读操作严格放在下一次 RAF 回调的开头
- 滚动监听等高频场景中，务必节流 + RAF 包裹，例如：
window.addEventListener('scroll', () => requestAnimationFrame(updatePosition))
选对 API，减少 layout 触发次数
有些 API 看似轻量，实则暗藏 layout 开销；有些组合反而更高效。
- 用 el.getBoundingClientRect() 一次性拿到 top/left/width/height，比分别读 offsetTop + offsetLeft + offsetWidth 少触发 layout
- 避免读未挂载元素的尺寸：即使 getComputedStyle(el).height 返回 'auto'，也会强制 layout
- 检查挂载状态优先用 el.offsetParent === null，比 el.offsetParent 更可靠
CSS 层面主动配合，绕过 layout
JS 不该包揽所有视觉控制。把能交给 CSS 引擎的事交出去，天然避开重排。
- 动画优先用 transform 和 opacity，它们走合成层，不触发 layout
- 避免在 JS 中修改 width、height、top、left 等几何属性
- 对频繁更新的区域加 contain: layout paint，限制重排影响范围
- 必要时用 will-change: transform 提示合成器，但别滥用
