添加大量元素时使用 DocumentFragments

我们经常使用该`appendChild`方法向给定元素添加新元素：

const li = document.createElement('li');
li.innerHTML = 'List item';

// Append to given list
ul.appendChild(li);

当一个新元素插入页面时，浏览器必须重新计算其父节点和父节点的子节点的尺寸。该过程称为回流。同样，更改元素的样式可能会导致重绘。

向文档中添加大量元素可能会影响页面的性能，因为它会多次触发重排：

for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.innerHTML = `List item ${i}`;
    ul.appendChild(li);
}

尽管现代浏览器进行了很多优化，包括批量更新，但建议`DocumentFragment`在这种情况下使用。我们创建一个没有父级的最小文档，并将我们的元素附加到它上面。它不会触发任何重排或重绘，因为尚未将文档片段添加到页面：

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.innerHTML = `List item ${i}`;
    fragment.appendChild(li);
}

最后，将文档片段插入到页面中：

ul.appendChild(fragment);

回流触发一次！