文档碎片-----虚拟节点

DOM添加节点会发生什么

假设需要创建50个li，添加到ul中，如果用for循环，在for循环中一次一次调用appendChild方法，相当于在页面中添加一次一次的添加li，每添加一次，DOM节点就会重新排列，
每次对dom的操作都会触发"重排"，这严重影响到能耗，所以我们需要减少能耗，创建一个虚拟节点，把li添加在 虚拟节点中，然后把虚拟节点添加到ul中，虚拟节点的值会自动销毁。

什么是文档碎片？

document.createDocumentFragment()

创建一个虚拟节点，把li添加在 虚拟节点中，然后把虚拟节点添加到ul中，虚拟节点的值会自动销毁。
 

 

文档碎片有什么用？

将需要添加的大量元素 先添加到文档碎片 中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能。

文档碎片相当于一个暂时的容器，就相当于我们需要交换的暂时空间，用完以后直接销毁。

例如：

我们有两个盒子，我们需要交换盒子的值，

 

实际案例

需求

1. 在一个ul中输出50个li.

代码

window.onload=function(){
                
            var ul=document.getElementsByTagName('ul')[0];
            1  创建container变量暂时储存li
            var container=document.createDocumentFragment();
            for(var i=0;i<50;i++){
            2    创建li节点
              var li=  document.createElement('li');
              li.innerHTML=i;
            3     把li节点添加到容器container中。  
            container.appendChild(li);
            }
            4    再把容器添加到ul中。
            ul.appendChild(container)
            5     container的值为空
                console.log(container);
        }