什么是重排？如何减少重排？

重排（Reflow）是浏览器重新计算元素的位置和大小，并重新绘制它们的过程。重排通常发生在以下情况下：

1.修改了 DOM 结构：添加、删除或修改元素。
2.改变了元素的样式：修改了元素的宽度、高度、边距、填充、定位等。
3.获取某些元素的尺寸或位置：调用诸如 offsetWidth、offsetHeight、clientWidth、clientHeight 等方法。

重排是一项昂贵的操作，因为它会触发浏览器重新计算并更新页面的布局，然后重新绘制受影响的元素，这可能会导致页面性能下降。
为了减少重排的次数，可以采取以下策略：

4.使用 CSS 动画代替 JavaScript 操作样式： CSS 动画通常比 JavaScript 操作样式更高效，因为它们可以在合适的时机由浏览器优化执行。
5.使用 classList API 进行样式操作： 使用 classList 属性添加、删除或切换元素的类，而不是直接修改元素的 style 属性。
6.将多次 DOM 操作合并为一次： 如果可能的话，尽量将多个 DOM 操作合并到一次操作中，以减少重排次数。
7.缓存布局信息： 如果需要多次访问某个元素的尺寸或位置，可以将这些信息缓存起来，避免多次触发重排。
8.使用文档片段（DocumentFragment）： 如果需要创建大量 DOM 元素，可以使用文档片段来批量创建，然后一次性添加到文档中，减少重排的次数。
9.避免触发布局属性的读取： 尽量避免在布局属性（如宽度、高度、偏移量等）发生变化的情况下读取它们，因为这会强制浏览器进行重排。
10.使用 transform 和 opacity 进行动画： 使用 transform 和 opacity 属性进行动画操作，因为它们通常可以利用 GPU 加速，从而减少重排的开销。

通过采取这些措施，可以有效地减少页面的重排次数，提高页面的性能和响应速度。

// 获取需要操作的元素
const container = document.getElementById('container');
const list = document.getElementById('list');

// 缓存查询结果
const containerWidth = container.offsetWidth;

// 批量操作 DOM
function addItems() {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
    const item = document.createElement('div');
    item.className = 'item';
    item.textContent = 'Item ' + (i + 1);
    fragment.appendChild(item);
  }
  list.appendChild(fragment);
}

// 在批量操作 DOM 之后获取新的容器宽度
function getNewContainerWidth() {
  const newContainerWidth = container.offsetWidth;
  console.log('Container width after adding items:', newContainerWidth);
}

// 添加元素按钮点击事件处理函数
document.getElementById('addItemsBtn').addEventListener('click', function() {
  addItems();
  getNewContainerWidth();
});