使用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次,而在第二种方法中,它最终只被触发一次。

回复

我来回复
  • 暂无回复内容