概念

DocumentFragment 接口表示文檔的一部分（或一段）。更確切地說，它表示一個(gè)或多個(gè)鄰接的Document 節(jié)點(diǎn)和它們的所有子孫節(jié)點(diǎn)。

DocumentFragment 節(jié)點(diǎn)不屬于文檔樹，繼承的 parentNode 屬性總是 null。

不過它有一種特殊的行為，該行為使得它非常有用，即當(dāng)請(qǐng)求把一個(gè) DocumentFragment 節(jié)點(diǎn)插入文檔樹時(shí)，插入的不是 DocumentFragment 自身，而是它的所有子孫節(jié)點(diǎn)。這使得 DocumentFragment 成了有用的占位符，暫時(shí)存放那些一次插入文檔的節(jié)點(diǎn)。它還有利于實(shí)現(xiàn)文檔的剪切、復(fù)制和粘貼操作

說明

我們知道每執(zhí)行一次DOM操作都會(huì)導(dǎo)致頁(yè)面的重繪和重新排版，比如當(dāng)進(jìn)行循環(huán)批量插入節(jié)點(diǎn)時(shí)，每一次插入就會(huì)刷新一次DOM樹，嚴(yán)重影響頁(yè)面性能。

這時(shí)候我們可以選擇使用DocumentFragment來臨時(shí)保存要插入的所有節(jié)點(diǎn)，循環(huán)完成后再插入到主文檔里邊，這樣就只需要修改一次DOM樹。

代碼

var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);