关于JS中文档碎片的理解

我们大家都知道，当我们在操作DOM的时候，是一个很耗性能的过程，尤其是改变DOM的结构就更加的消耗性能，但是有些时候我们不得不在DOM中添加内容，改变DOM的结构，此时我们就要减少DOM结构改变时的性能消耗，怎么减少性能消耗呢，这时我们就要引用“文档碎片”，其目的就是将我们每次增加的节点先存储在文档碎片中，在将文档碎片再添加到DOM结构中，这样将多次增加节点改变DOM结构，变了只改变一次DOM结构，大大得减少了性能的消耗。

<script>
    let frg=document.createElementFragment();//创建一个文档碎片
    for(let i=0;i<1000;i++){
        var oDiv=document.createElement("div");创建一个节点
        oDiv.innerHTML="大家好"+i;
        frg.appendChild(ODiv);//没创建一条就添加到文档碎片中
    }
    document.body.appendChild(frg);//添加到页面的末尾。
    frg=null;//将临时创建的文档碎片在操作完成之后，赋值为null。释放内存，减少性能的消耗。
</script>

在这里我们需要注意的是：当我们在给页面末尾追加这文档碎片的时候，只是将文档碎片的子节点添加到了页面的末尾，而文档碎片本身并没有添加到页面中。在添加结束之后，记得将临时创建的文档碎片赋值为null，目的是减少性能的消耗。
即减少了DOM结构改变时消耗的性能，又防止了使用完毕的文档碎片消耗性能，一举多得，prefect！！！