CSS的重绘和重排是什么？

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

在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的更新过程，减少不必要的重排和重绘。

好了，分享结束，谢谢点赞，下期再见。