首页 > 其他 > 详细

回流和重绘有什么区别,如何优化

时间:2020-05-21 23:00:54      阅读:58      评论:0      收藏:0      [点我收藏+]

dom tree+css=render tree

 

回流

当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。

 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

 

如何减少回流、重绘

减少回流、重绘其实就是需要减少对render tree的操作(合并多次多DOM和样式的修改),并减少对一些style信息的请求,尽量利用好浏览器的优化策略。具体方法有:

 

1.直接改变className

2.使用DocumentFragment进行缓存操作,引发一次回流和重绘;

3.使用display:none技术,只引发两次回流和重绘; ( 只是减少重绘和回流的次数,display:none 是会引起重绘并回流,相对来说,visibility: hidden只会引起重绘 )

4.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

5.让元素脱离动画流,减少回流的Render Tree的规模
————————————————
版权声明:本文为CSDN博主「踏着阳光2020」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xiaoxiaojie12321/java/article/details/81352550

回流和重绘有什么区别,如何优化

原文:https://www.cnblogs.com/wszxx/p/12933801.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!