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

一、什么是回流和重绘

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

二、重绘的几种情况：

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

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

微信截图_20201126104747.png

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

微信截图_20201126105015.png