doubleyong
管理员
管理员
  • 最后登录2021-06-18
  • 发帖数1013
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:174回复:0

[es 6]JS中文档碎片的理解和使用

楼主#
更多 发布于:2021-06-02 11:03
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);


 


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


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

关注我,一起学习吧

鼓励一下,赐个在看

图片:vx.png


知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号