什么是重绘和重排

Posted Frazier_梁超

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是重绘和重排相关的知识,希望对你有一定的参考价值。

重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)

 

重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。

重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

如何引发重排

1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口尺寸改变

以上是关于什么是重绘和重排的主要内容,如果未能解决你的问题,请参考以下文章

什么是重绘和重排? 如何去避免?

☀️什么是重绘和重排? 如何去避免?

重绘和重排是什么

重绘和重排是什么

重绘和重排是什么

前端性能-重绘和重排(回流)