• 直譯過來就是文檔碎片，表示一個沒有父級文件的最小文檔對象。它被作為一個輕量版的 Document。最大的區(qū)別是因為 DocumentFragment 不是真實DOM樹的一部分，它的變化不會觸發(fā) DOM 樹的（重繪) ，且不會導致性能等問題。
• 它主要用來解決dom元素的插入問題，比如需要插入多個dom節(jié)點時，可以創(chuàng)建一個Document?Fragment，把節(jié)點依次添加到Document?Fragment上，添加完畢后再把Document?Fragment添加到頁面document上，這樣只會產(chǎn)生一次重繪。而如果直接把dom節(jié)點依次添加到頁面document上就會引發(fā)多次重繪
• 實際上現(xiàn)代瀏覽器對js引發(fā)重繪的操作也會進行節(jié)流控制的，比如短時間內(nèi)觸發(fā)了多次repaint的話，瀏覽器會將他們合并成一次repaint來處理，不過保險起見直接使用Document?Fragment即可。
• 可以通過document.createDocumentFragment創(chuàng)建一個文檔碎片。

var oFrag=document.createDocumentFragment();

for (var i=0; i<1000; i++) {
  var op=document.createElement("div");
  var oText=document.createTextNode(‘i’);
  op.appendChild(oText);
  oFrag.appendChild(op);
}
document.body.appendChild(oFrag);

• html原生的<template>標簽其實就是一個documentfragment，使用template標簽時，實際插入到document上面的是，template的子節(jié)點，它本身不會被添加到dom上面。
• react框架也有類似template的文檔碎片概念：fragments，從而可以一個組件返回多個元素。
• vue也使用了template標簽，不過他不允許一個組件模板上有多個父元素節(jié)點(必須有一個唯一父節(jié)點)。