怎样区分页面的回流和重绘

一、什么是回流和重绘

引起DOM树结构变化,页面布局变化的行为叫回流,且回流一定伴随重绘。
只是样式的变化,不会引起DOM树变化,页面布局变化的行为叫重绘,且重绘不一定会便随回流。

二、重绘的几种情况:

1、改变字体
2、增加或者移除样式表
3、内容变化,比如用户在input框中输入文字
4、激活css伪类,比如 :hover
5、脚本操作DOM
6、计算offsetWidth和offsetHeight属性:在页面上的定位元素在滚动页面的时候会引起重绘
7、设置style属性的值

三、怎样在页面上看出重绘了

微信截图_20201126104747.png

通过上图操作 后 我们在浏览页面的 时候如果发生了重绘 页面重绘的部分就会高亮绿色如下图


微信截图_20201126105015.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容