JS中文档碎片的理解和使用

1、我们要明白当js操作dom时发生了什么？   

每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少dom操作来减少"重排"        

 

2、什么是文档碎片？  

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

 

3、文档碎片有什么用？    

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

示例：往页面上放100个元素；
  

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

通过for循环，每次循环，添加一个dom元素

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

 

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

先将dom暂存在文档碎片中，然后在一次性操作dom        

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

 

前端性能优化都是从一些细节地方做起的，如果不加以注意，后果很严重。

 

 

---

 

苟有恒 , 何必三更眠五更起

关注我，一起学习吧

鼓励一下，赐个赞 和 在看吧