谈谈重绘回流及解决方法
发布于2021-10-19 22:43 阅读(1259) 评论(0) 点赞(2) 收藏(1)
什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流必将引起重绘，而重绘不一定会引起回流。
浏览器会帮助我们优化这些操作
浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。（类似防抖节流）
有些老版本的浏览器并不会自己优化
如何自行减少重绘、回流？
对于css（合并处理）
·批量修改DOM
原文链接:https://blog.csdn.net/m0_50569176/article/details/120831819
所属网站分类: 技术文章 > 博客
作者：前端大师
链接：http://www.qianduanheidong.com/blog/article/203906/9e0423cf522543eabf88/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力