一般動(dòng)態(tài)創(chuàng)建html元素都是創(chuàng)建好了直接appendChild()上去，但是如果要添加大量的元素還用這個(gè)方法的話就會(huì)導(dǎo)致大量的重繪以及回流，所以需要一個(gè)'緩存區(qū)'來保存創(chuàng)建的節(jié)點(diǎn)，然后再一次性添加到父節(jié)點(diǎn)中。這時(shí)候DocumentFragment對(duì)象就派上用場(chǎng)了。

看下w3c的官方說明：

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ù)制和粘貼操作

重點(diǎn)就在于DocumentFragment 節(jié)點(diǎn)不屬于文檔樹。因此當(dāng)把創(chuàng)建的節(jié)點(diǎn)添加到該對(duì)象時(shí)，并不會(huì)導(dǎo)致頁(yè)面的回流，因此性能就自然上去了。

創(chuàng)建該對(duì)象也簡(jiǎn)單：

var fragment = document.createDocumentFragment();

實(shí)例：

<script type="text/javascript">
    var pNode,fragment = document.createDocumentFragment();
        
    for(var i=0; i<20; i++){
        pNode = document.createElement('p');
        pNode.innerHTML = i;
        fragment.appendChild(pNode);
    }
    document.body.appendChild(fragment);
    
</script>

參考： https://www.cnblogs.com/11lang/p/6206541.html