你好同学,我是沐爸,欢迎点赞、收藏和关注。个人知乎
在CSS中,元素的某些属性的变化会触发浏览器的重绘(Repaint)或重排(Reflow,也称为重渲染或回流)。了解这些差异可以帮助开发同学优化页面性能,避免不必要的性能开销。
一、重排(Reflow)
重排,简单理解就是重新排列。重排是浏览器中最昂贵的操作之一,因为它涉及到重新计算页面上所有受影响的元素的位置和几何尺寸。以下CSS属性的改变通常会触发重排:
1.布局相关属性
如width
、height
、padding
、margin
、border
、display
(当值从none
变为其他时)、position
、top
、right
、bottom
、left
、float
、clear
、overflow
(当值从visible
变为hidden
、scroll
或auto
时,且内容溢出时)等。
2.内容相关属性
虽然内容(如文本或图片)的更改通常不会导致重排,但如果内容增加导致元素尺寸改变,或者元素的可见性改变(如display: none
变为display: block
),则可能触发重排。
3.添加或删除DOM元素
这通常会导致相关元素的重排。
二、重绘(Repaint)
重绘,简单理解就是重新绘制。比重排开销小,它只涉及到改变元素的外观,而不改变其在文档流中的位置或几何尺寸。以下CSS属性的改变通常只触发重绘:
视觉相关属性:
如color
、background
、border-style
(不影响尺寸)、visibility
(当元素从visible
变为hidden
时,不涉及位置变化)、text-decoration
、box-shadow
、outline
等。
三、两者的关系
1.重排一定会导致重绘,但重绘不一定导致重排。
举例来说,以渐变背景色为例,宽度的改变引起重排,那么渐变背景色就要根据新的宽度进行重新生成背景色。而改变背景色,只需要重新绘制,但页面布局不变,不会发生重排。
2.重绘和重排可能同时发生。
重绘和重排同时触发的典型场景:修改元素的尺寸和位置、添加和删除DOM元素、浏览器窗口大小改变、修改元素的显示属性(display属性从none变为其他值、visibility属性从hidden变为visible)
四、优化策略
- 减少DOM操作:尽量减少直接操作DOM,尤其是大量DOM元素时。
- 合并DOM操作:将多个DOM操作合并成一个,以减少重排和重绘的次数。
- 使用CSS类:通过修改CSS类来改变元素的样式,而不是直接操作DOM元素的样式属性。
- 利用CSS3硬件加速:使用CSS3的transform、opacity等属性可以通过GPU加速来提高渲染速度,减少重绘的开销。
- 使用新技术:批量修改DOM元素,使用
DocumentFragment
或requestAnimationFrame
等技术来优化性能。 - 操作延迟:尽量避免在布局未稳定时(如调整窗口大小)读取或修改布局属性,因为这可能导致额外的重排。
- 使用虚拟DOM:在JavaScript框架中,可以使用虚拟DOM来优化DOM的更新过程,减少不必要的重排和重绘。
希望对你有所帮助,下期再见!
标签:DOM,元素,重排,重绘,CSS,属性 From: https://blog.csdn.net/m0_37943716/article/details/141143308