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
