1.語法

let fragment = document.createDocumentFragment();

fragment 是一個指向空DocumentFragment對象的引用。

2.描述

DocumentFragments 是DOM節(jié)點。它們不是主DOM樹的一部分。通常的用例是創(chuàng)建文檔片段，將元素附加到文檔片段，然后將文檔片段附加到DOM樹。在DOM樹中，文檔片段被其所有的子元素所代替。

因為文檔片段存在于內(nèi)存中，并不在DOM樹中，所以將子元素插入到文檔片段時不會引起頁面回流（對元素位置和幾何上的計算）。因此，使用文檔片段通常會帶來更好的性能。

2.1 HTML

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

2.2 JavaScript

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

3.關(guān)于DocumentFragment

DocumentFragment 接口表示一個沒有父級文件的最小文檔對象。它被當(dāng)做一個輕量版的 Document 使用，用于存儲已排好版的或尚未打理好格式的XML片段。最大的區(qū)別是因為DocumentFragment不是真實DOM樹的一部分，它的變化不會引起DOM樹的重新渲染的操作(reflow) ，且不會導(dǎo)致性能等問題。

最常用的方法是使用文檔片段（DocumentFragment）作為參數(shù)（例如，任何 Node 接口類似 Node.appendChild 和 Node.insertBefore) 的方法），這種情況下被添加(append)或被插入(inserted)的是片段的所有子節(jié)點, 而非片段本身。因為所有的節(jié)點會被一次插入到文檔中，而這個操作僅發(fā)生一個重渲染的操作，而不是每個節(jié)點分別被插入到文檔中，因為后者會發(fā)生多次重渲染的操作。

可以使用document.createDocumentFragment 方法或者構(gòu)造函數(shù)來創(chuàng)建一個空的 DocumentFragment.

參考資料：MDN