理解js文档碎片

先来聊聊DOM操作

当我们每次操作DOM的时候都会导致页面的刷新(重绘或者回流),那如果这种操作很频繁的话势必会影响到能耗,所以我们提倡要尽量减少对DOM的操作.那么要如何减少对DOM的操作呢?我们就可以借助于文档碎片的原理来实现.

什么是文档碎片原理?

就是减少DOM修改带来的回流操作

什么是回流操作?

我们来用生活中的例子来讲解
就说有一个人需要去商店买油、盐、酱、醋

这里他可以用以下两种方法来实现

第一种: 他去到商店,然后把油盐酱醋一起买完,然后回家.
第二种:他去到商店,一次就买一种东西回家,然后再去买其余的,直到四样产品都买完.

那哪种方式更节省时间成本呢,显然就是第一种嘛.
而这第二种这种来来回回的行为方式就是我们上面说的回流操作了
那通过对比,我们明白要减少对DOM的修改,我们可以结合文档对片原理,将需要添加的大量元素 先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大 减少DOM操作，提高性能

js实现文档碎片

document.createDocumentFragment() 创建一个容器，用于暂时存放创建的dom元素

举例说明:
需要想DOM中添加100个新元素

普通方式：（操作了100次dom）

for(var i=100; i>0; i--){ 
    var elem = document.createElement('div');
    document.body.appendChild(elem);//放到body中
}

文档碎片：(操作1次dom)

 var df = document.createDocumentFragment();          
 for(var i=100; i>0; i--){              
      var elem = document.createElement('div');                             
      df.appendChild(elem);
 }         
 //最后放入到页面上         
document.body.appendChild(df);

完结!