避免循环中读写触发重排的关键是读写分离、缓存结果、用transform/opacity替代几何属性、缓存dom查询及批量操作。
先批量读取所有需要的布局信息
像 offsetTop、clientWidth、getBoundingClientRect() 这类属性，每次访问都可能强制浏览器同步计算当前布局。如果在循环中边读边写，等于反复打断渲染流水线。
- 错误写法：在 for 循环里一边读
el.offsetTop，一边设el.style.left - 正确做法：第一轮循环只读，把所有值存进数组或对象；第二轮再统一写样式
- 例如：先收集所有 offsetTop，再统一用 transform 移动元素，避免 layout thrashing
用 transform 和 opacity 替代 top/left/width/height
修改 top、left、width 等属性会直接改变元素几何信息，必然触发重排；而 transform 和 opacity 属于合成层属性，只走 GPU 合成，不触发布局计算。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 把
el.style.left = x + 'px'换成el.style.transform = `translateX(${x}px)` - 动画场景下，给元素加
will-change: transform（仅必要时），提示浏览器提前升层 - 注意：不要滥用
will-change，它本身有内存开销
缓存 DOM 查询和属性访问结果
每次调用 document.querySelector 或读 element.style.color 都有隐式开销；嵌套访问如 list[i].children[0].offsetHeight 更是重复查多层对象。
- 把
const items = document.querySelectorAll('.item')提到循环外 - 用
const len = items.length缓存长度，别在 for 条件里每次读 - 对频繁访问的属性（如
el.offsetTop）也缓存一次，后续直接用变量
批量操作优先用 DocumentFragment 或离线 DOM
连续调用 appendChild 多次，每次都会触发重排；不如先把节点塞进 DocumentFragment，最后一次性挂载。
- 插入多个元素时：
const frag = document.createDocumentFragment()，循环 append 到 frag，最后parent.appendChild(frag) - 或者临时设
parent.style.display = 'none'，操作完再恢复，也能避免中间状态重排
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
