浏览器重绘和重排

重排reflow:DOM的变化影响到了元素的宽高,导致浏览器要重新计算元素的宽高(影响到页面布局),甚至影响到渲染数中的某些部分就需要重新渲染。改变窗口大小、文字大小、内容变化、浏览器窗口大小、style属性的改变等会导致重排。

重绘repaint:一个元素的外观发生了改变,但是没有改变元素的宽高,比如改变元素的背景色、outline、visibility等会导致重绘。

重排一定会导致重绘。重绘不一定导致重排。

会触发重绘的属性
-----color
-----border-style/border-radius
-----visibility
------文本下划线:text-decoration
-----背景:background/background-image/background-position/background-repeat/background-size
-----元素周围轮廓线:outline/outline-color/outline-style/outline-width
-----box-shadow

会触发reflow重排的属性
1)盒子模型相关属性

width/height
padding/margin
display
border/border-width
min-height

2)定位属性、浮动

top/bottom/left/right
position
float
clear

3)文字相关属性

text-align/vertical-align
overflow/overflow-y
font-weight/font-family/font-size
white-space
line-height
发布了90 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/me_never/article/details/103169688