跳到主要内容

认识

2023年08月11日
柏拉文
越努力，越幸运

一、认识​

DocumentFragment，文档片段接口，表示一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。

二、语法​

const fragment = new DocumentFragment();

三、属性​

该接口没有特殊的属性，其属性都继承自 Node。

四、方法​

该接口继承 Node 的全部方法。

五、场景​

最常用的方法是使用 DocumentFragment 创建并组成一个 DOM 子树，然后使用 Node 接口方法（如：appendChild() 或 insertBefore()）将其插入到 DOM 中。这种情况下会插入片段的所有子节点，并留下一个空的 DocumentFragment。因为所有的节点会被一次插入到文档中，所以仅会发生一个重渲染的操作，而不是每个节点分别被插入到文档中从而发生多次重渲染的操作。

5.1 渲染列表​

<ul id="list"></ul>

<script>
    const list = document.querySelector("#list");
    const fruits = ["Apple", "Orange", "Banana", "Melon"];

    const fragment = new DocumentFragment();

    fruits.forEach((fruit) => {
        const li = document.createElement("li");
        li.textContent = fruit;
        fragment.appendChild(li);
    });

    list.appendChild(fragment);
</script>