[https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment) DocumentFragment **implements** [`ParentNode`](https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode "ParentNode 混合了所有(拥有子元素的) Node 对象包含的共有方法和属性。") DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。 最常用的方法是使用文档片段作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。 该接口在 Web 组件（Web components）中也非常有用：\<template\> 元素在其 HTMLTemplateElement.content 属性中包含了一个 DocumentFragment。 可以使用document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment。 ~~~html <ul id="list"></ul> <script> const list = document.querySelector('#list'); const fruits = ['Apple', 'Orange', 'Banana', 'Melon']; const fragment = document.createDocumentFragment(); fruits.forEach(fruit => { const li = document.createElement('li'); li.innerHTML = fruit; fragment.appendChild(li); }); list.appendChild(fragment); </script> ~~~