使用DocumentFragment优化DOM操作

DocumentFragment是什么？

DocumentFragment接口表示一个没有父类的最小文档对象。

它被用作文档的轻量级版本，存储由节点组成的文档结构的片段，就像标准文档一样。

现在让我们看看DOM操作的不同方式：

方法一（不推荐）

 for (int i = 0; i < 10000; i++) {
        const p = document.createElement("p");
        document.body.appendChild(p);
    }

上面的操作花费了 413.125ms

方法二

const fragment = new document.createDocumentFragment();
    for (int i = 0; i < 10000; i++) {
        const p = document.createElement("p");
        fragment.appendChild(p);
    }
    document.body.appendChild(fragment);

上面的操作花费了 12.189ms

解释

这种巨大的性能差异是由于文档片段不是活动文档树结构的一部分。因此，对片段所做的更改不会影响文档(即使在回流中)，或者在进行更改时产生任何性能影响。

而且，每当一个元素被添加到DOM中时，渲染都会被触发。所以在第一种方法中，渲染被触发10000次，而在第二种方法中，它最终只被触发一次。