DocumentFragment - Javascript

DocumentFragment 是 JavaScript 中文档片段对象（non-visual element），可以看作一个轻量级的 Document，它可以包含文档任意的节点，但是不会像 Document 一样影响网页的布局。

创建 DocumentFragment

DocumentFragment 可以用 JavaScript 中 Document 对象的 createDocumentFragment() 方法进行创建。

const fragment = document.createDocumentFragment();

操作 DocumentFragment

可以像操作 Document 对象一样来操作 DocumentFragment。

const fragment = document.createDocumentFragment();

const p = document.createElement('p');
p.textContent = 'Hello World';

fragment.appendChild(p);

document.body.appendChild(fragment);

上述代码演示了，先通过 Document 对象创建了一个 DocumentFragment 对象 fragment，然后向 fragment 中添加了一个 p 标签，最后将 fragment 添加到了文档中。

DocumentFragment 的好处

使用 DocumentFragment 与直接操作 DOM 节点相比，有以下好处：

• 性能提升： DocumentFragment 优于操作真实 DOM 节点操作，因为它不会引发页面重排和重绘。
• 异步操作：如果需要对文档添加大批量的 DOM 节点，建议使用 DocumentFragment，这样可以一次性添加，提高性能。

总结

• DocumentFragment 是一个轻量级的 Document，不会影响文档的布局。
• 可以通过 Document 对象的 createDocumentFragment() 方法进行创建。
• 使用 DocumentFragment 有助于提升性能，特别是在添加大批量的 DOM 节点时。