js-文档碎片的理解与使用

文档碎片

前提：js操作dom

每次对dom的元素的操作都会触发’重排’ (重新渲染页面，发生重绘、回流) ，严重影响到能耗，一般采取的做法是尽可能地减少操作dom元素，减少重绘

什么是文档碎片？

文档碎片独立于DOM树之外，存在于内存中，在创建之初为一个空白的文档片段，
document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素

文档碎片有什么用？

将需要添加的dom元素先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大的减少dom操作，提高性能
（IE和火狐比较明显）

比如需要往页面添加100个元素，

for(let i=100;i>0;i--){
    
    
    var ele = document.createElement('div');
    document.body.appendChild(ele);
}

文档碎片操作：

var docFra = document.createDocumentFragment();
for (var i =100;i>0;i--){
    
    
    var ele = document.createElement('div');
    docFra.appendChild(ele)
}
document.body.appendChild(docFra);