减少布局抖动需分离dom读写操作：先批量读取几何信息（如getboundingclientrect），再统一写样式；必须读新布局时用requestanimationframe延迟读取；优先使用transform、opacity和css类等低开销方案。
减少布局抖动的核心是避免在单次 JavaScript 执行中交替读写 DOM 几何信息，让浏览器能批量处理样式变更、自然完成布局计算，而不是被迫“马上重排”。
严格分离读操作与写操作
所有需要的布局值（如 offsetHeight、getBoundingClientRect()、clientTop）必须在任何样式修改前一次性读完；所有样式更新（element.style.xxx、className、classList.toggle）集中放在后面统一执行。
- ❌ 避免：改一个属性 → 立即读一个值 → 再改一个 → 再读… 这会触发多次强制同步布局
- ✅ 推荐：先用
const rect = el.getBoundingClientRect(); const h = el.offsetHeight;把全部尺寸存入变量，再批量设置el.style.transform或切换 class
用 requestAnimationFrame 延迟读取新布局
当必须在样式变更后获取最新尺寸（比如动画下一帧的位置），把读取逻辑放到 requestAnimationFrame 回调开头——此时浏览器已完成 layout，但尚未 paint，读取不会引发额外重排。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 不要写
el.style.width = '300px'; console.log(el.offsetWidth); - 应写
el.style.width = '300px'; requestAnimationFrame(() => console.log(el.offsetWidth)); - 注意：raf 回调里仍要避免反复读写混用，尤其在 scroll 或 resize 事件中
优先使用低开销替代方案
不是所有布局读取都不可避免，有些 API 天然更轻量，或可通过设计规避。
- 用
transform和opacity实现位移/缩放/透明度动画，它们走合成线程，不触发 layout - 用 CSS 类控制状态变化（如
el.classList.add('is-open')），比逐个设style.margin更易被浏览器优化 - 用
getBoundingClientRect()一次获取全部位置尺寸，比分别读offsetTop+offsetLeft+offsetWidth更高效 - 对未挂载到文档的元素，避免读
offsetParent或getComputedStyle，可能无效且仍触发 layout
警惕隐蔽的触发点
有些操作看似安全，实则暗藏布局抖动风险。
-
useLayoutEffect中读尺寸仍是同步的，React 场景下建议拆成两个 effect：一个只写样式，另一个用useEffect+requestAnimationFrame读 -
contain: layout或content-visibility: auto不代表读取其尺寸就安全，仍可能强制计算 - 循环中处理多个元素时，别写
for (let i = 0; i ，应先遍历读所有 offset，再遍历写所有 style
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
