面试题：JavaScript 批量 DOM 操作的优化策略

使用 DocumentFragment：
- 技术：DocumentFragment 是 DOM 节点的轻量级替代品，它存在于内存中，并不在 DOM 树里。
- 操作步骤：
  - 创建一个 DocumentFragment 对象，使用 document.createDocumentFragment()。
  - 获取页面上需要修改的 DOM 元素，例如通过 document.querySelectorAll() 获取所有相关元素。
  - 将获取到的 DOM 元素逐一添加到 DocumentFragment 中。
  - 对 DocumentFragment 中的元素进行样式修改等操作。
  - 最后，将 DocumentFragment 添加回原来 DOM 元素所在的位置，替换掉原来的 DOM 元素集合。例如，如果原来的元素在 parentElement 下，可以使用 parentElement.appendChild(fragment)。
- 性能提升原因：每次对 DOM 进行操作都会引起浏览器的重排和重绘，这是比较消耗性能的。而在 DocumentFragment 中操作元素，由于它不在 DOM 树中，不会触发浏览器的重排和重绘，只有在最后将 DocumentFragment 插入到 DOM 树时才会触发一次重排和重绘，大大减少了性能消耗。
批量修改样式：
- 技术：避免逐行修改样式，而是一次性修改多个样式。
- 操作步骤：
  - 可以通过设置元素的 className 来改变样式。先在 CSS 中定义好需要的样式类，例如：

.highlight {
  background - color: yellow;
  color: blue;
}

 - 然后在 JavaScript 中获取元素后，使用 `element.classList.add('highlight')` 来一次性应用多个样式。

性能提升原因：每次通过 element.style.property 逐行修改样式会多次触发重排和重绘，而通过修改 className 一次性应用多个样式，浏览器可以在应用新样式时进行优化，只触发一次重排和重绘，提高性能。

使用 requestAnimationFrame（可选，针对动画相关样式修改）：
- 技术：requestAnimationFrame 是浏览器提供的用于在下次重绘之前执行回调函数的方法。
- 操作步骤：
  - 将修改 DOM 元素样式的操作放在 requestAnimationFrame 的回调函数中。例如：

function updateStyles() {
  const elements = document.querySelectorAll('.target - elements');
  elements.forEach((element) => {
    element.style.transform = 'translateX(50px)';
  });
}
requestAnimationFrame(updateStyles);

性能提升原因：requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，它会与浏览器的刷新频率同步，这样可以避免不必要的重排和重绘，并且浏览器可以更好地优化动画的执行，提高性能。特别是在进行动画相关的样式修改时，使用 requestAnimationFrame 能让动画更加流畅。

面试题：JavaScript 批量 DOM 操作的优化策略

知识考点

面试题答案