面试题：JavaScript 中如何高效地批量更新 DOM 元素的样式

Question

假设页面上有大量（比如1000个）具有相同类名的 DOM 元素，现在需要同时更新这些元素的背景颜色为红色，并且要考虑性能问题，避免造成页面卡顿。请用 JavaScript 实现这个功能，并简要说明这样做能提升性能的原因。

Answer 1

实现代码

// 获取所有具有相同类名的元素
const elements = document.querySelectorAll('.yourClassName');
// 创建一个DocumentFragment
const fragment = document.createDocumentFragment();
// 遍历元素，设置背景颜色并添加到DocumentFragment
for (let i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor ='red';
    fragment.appendChild(elements[i]);
}
// 将DocumentFragment添加回文档
document.body.appendChild(fragment);

提升性能原因

1. 减少重排重绘：使用 DocumentFragment 操作 DOM，将所有元素先添加到 DocumentFragment 中进行修改，而 DocumentFragment 不属于真实 DOM 树，对其操作不会触发页面的重排重绘，只有在最后将 DocumentFragment 添加回文档时才触发一次重排重绘，相比直接操作大量真实 DOM 元素多次触发重排重绘，大大提升了性能。
2. 批量操作：一次性对所有元素设置背景颜色，减少了操作 DOM 的次数，降低了浏览器渲染的压力，从而避免页面卡顿。