什么是重绘和重排

在前端开发中，"重绘"（Repaint）和"重排"（Reflow）是涉及网页渲染的两个重要概念。它们都涉及到浏览器如何处理和更新网页的可视化呈现。

1. 重绘（Repaint）：重绘是指当元素的外观样式发生变化，但不影响其在文档流中的位置时，浏览器会重新绘制（paint）这些元素，使其呈现新的样式。重绘通常发生在修改颜色、背景、文本样式等情况下。重绘不会引起页面的重新布局。

2. 重排（Reflow）：重排是指当元素的布局属性发生变化，导致页面布局需要重新计算和调整时，浏览器会进行重排操作。重排会涉及到整个页面布局的计算，可能影响到多个元素的位置和尺寸。比如，当你改变了一个元素的宽度、高度、位置、字体大小等属性时，会触发重排。

重绘和重排发生的条件取决于页面中的DOM元素和CSS样式的变化。下面是触发重绘和重排的一些常见情况：

重绘（Repaint）可能发生的情况：

1. 修改颜色、背景色、边框颜色等外观样式：当元素的外观样式属性发生变化，如颜色、背景色、边框颜色等，浏览器会重新绘制元素，但不影响其位置。

2. 文本样式变化：修改字体样式、文字颜色、字体大小等会导致重绘。

3. 透明度变化：改变元素透明度也会触发重绘。

重排（Reflow）可能发生的情况：

1. 尺寸变化：当元素的宽度、高度发生变化，或者内容的大小改变时，浏览器会进行重排，因为这可能会影响布局。

2. 布局属性变化：修改元素的位置、浮动属性、定位属性（如position、left、top等）都可能触发重排。

3. 添加或删除元素：添加、删除元素会导致页面布局变化，从而触发重排。

4. 字体变化：修改字体大小、字重等也可能引起重排，因为文本的尺寸变化可能会导致周围元素的重新布局。

5. 获取布局信息：一些JavaScript操作，比如调用offsetTop、offsetLeft等属性来获取元素的布局信息，也会强制浏览器进行重排。

重排比重绘更昂贵，因为它会影响页面的整体性能。每次重排都会触发布局的重新计算，而布局计算涉及多个元素的相互影响，因此它可能导致浏览器重新计算整个渲染树，影响性能。

为了优化网页性能，开发者应该尽量减少重排和重绘的发生。一些优化策略包括：

• 使用 CSS 动画来代替 JavaScript 动画，因为前者通常只会触发重绘，而后者可能会导致重排。
• 使用 CSS3 的硬件加速属性（如 transform 和 opacity），因为它们能够在不引发重排的情况下改变元素样式。
• 批量更新样式和布局，尽量避免多次单独更新样式，以减少重排次数。
• 使用虚拟 DOM 技术来最小化页面更新，因为虚拟 DOM 能够智能地处理需要更新的部分，减少不必要的重排和重绘。