重排指的是浏览器根据DOM结构和CSS样式计算元素的几何属性并并重新布局的过程；当修改DOM结构、修改了元素的尺寸或位置、改变元素的显示与隐藏状态、修改CSS样式，都会触发浏览器重排；
可以通过performance.getEntriesByType('layout')方法获取到浏览器进行布局的次数；
那么如何减少重排次数呢？
- 合并多次DOM操作
比如动态向列表<ul>中添加<li>，写一个for循环来逐个添加；这样会导致每一次添加都重新计算布局；
解决办法：
预先创建所有元素，并一次性添加至DOM中；
- 使用CSS3动画
使用transform动画（）替代JS动画；CSS3动画可以直接被浏览器优化，避免触发重排；大多数现代浏览器能对transform引起的变更进行硬件加速，这意味着它们可以利用GPU（图形处理器）来执行动画，而不是仅仅依赖CPU。
与直接操作DOM元素的位置（例如，通过修改top、left、margin等属性）不同，transform不会引起页面的布局重排（reflow），transform操作发生在浏览器的合成层，仅影响元素的视觉表现，因此浏览器不必重新计算布局。不改变元素在文档流的实际位置或尺寸。
- 使用文档片段
DocumentFragment进行批量插入
const fragment = document.createDocumentFragment();for (let i = 0; i < items.length; i++) {const newItem = document.createElement('li');newItem.textContent = items[i];fragment.appendChild(newItem); // 将元素添加到fragment而非直接添加到DOM
}list.appendChild(fragment); // 一次性将所有元素添加到DOM
- 语义化标签
语义化标签并不能直接减少重排（reflow）现象，但它们通过改善网页结构和代码的可读性，间接地促进了性能优化，从而可能减少因为不当的页面布局或脚本操作导致的重排需求。
具体的选择器（例如基于语义化标签的选择器）可以更快地被浏览器解析，减少了样式计算的时间，间接地减少了可能因样式重新计算而导致的重排。
)
)
)