[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> ~~~