DocumentFragment

DocumentFragment，文档片段，不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。
其parentNode为null。
当把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，
而是它的所有子孙节点。这使得DocumentFragment成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

性能比较

• 1.document.crateElement()
• 2.innerHTML
• 3.documenFragment

// 1.document.crateElement()
        console.time("控制台计时器一");
        var container = document.getElementById('box');
        for (var i = 0; i < 1000; i++) {
            var temp = document.createElement('p');
            temp.innerHTML = 'i';
            container.appendChild(temp);
        }
        console.timeEnd("控制台计时器一");

        // 2.innerHTML
        console.time("控制台计时器一");
        var str = '';
        for(var i =0 ; i < 1000 ; i++){
          str += `<p>${i}</p>`;
        }
        
        container.innerHTML=str;
        console.timeEnd("控制台计时器一");

        // 3.documenFragment
        console.time("控制台计时器一");
        var oFragmeng = document.createDocumentFragment();
        for(var i=0;i<1000;i++){
          var p = document.createElement('p');
          p.innerText = i;
          oFragmeng.appendChild(p);
        }
        container.appendChild(oFragmeng);
        console.timeEnd("控制台计时器一")

输出

控制台计时器一: 6.0712890625ms
控制台计时器二: 2.075927734375ms
控制台计时器三: 1.890869140625ms

通过时间的对比我们可以看出来------createElement > innerHTML > documentFragment

多数情况下，DocumentFragment性能优于innerHTML，在移动端浏览器的个别情形下，innerHTML更优。

参考
https://www.cnblogs.com/mengff/p/7707184.html