什么是DocumentFragment？
DocumentFragment 節(jié)點不屬于文檔樹，繼承的 parentNode屬性總是 null。
不過它有一種特殊的行為，該行為使得它非常有用，即當(dāng)請求把一個
DocumentFragment節(jié)點插入文檔樹時，插入的不是DocumentFragment自身，而是它的所有子孫節(jié)點。
這使得
DocumentFragment成了有用的占位符，暫時存放那些一次插入文檔的節(jié)點。它還有利于實現(xiàn)文檔的剪切、復(fù)制和粘貼操作。
可以用 Document.createDocumentFragment() 方法創(chuàng)建新的空 DocumentFragment 節(jié)點。
也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 獲取包含現(xiàn)有文檔的片段的 DocumentFragment 節(jié)點。
用途
同時我們了解到當(dāng)需要對頁面DOM進行操作的時候必然會導(dǎo)致多次 重繪、回流（什么是重繪，回流？）。這樣會加大頁面的負擔(dān)。影響頁面性能。因此我們可以創(chuàng)建這樣一個臨時占位符。進行操作以下是DEMO:
// Create the fragment
var fragment = document.createDocumentFragment();
//add DOM to fragment
var spanNode = document.createElement("span");
spanNode.innerHTML = "Hello World";
fragment.appendChild(spanNode);
//add this DOM to body
document.body.appendChild(spanNode);
QQ截圖20170427103257.jpg
