重绘和重排的区别？

“重绘”（Repaint）和"重排"（Reflow）是两个关键概念，它们描述了浏览器渲染页面时的不同过程和影响。

重绘（Repaint）指的是浏览器根据元素的样式属性进行重新绘制，但不会改变元素的布局。当元素的***可见样式属性（如颜色、背景色、边框等）***发生改变时，浏览器会重新绘制该元素，使其呈现新的样式。重绘的代价相对较低，因为它只会更新元素的外观，而不会引起布局的改变。

重排（Reflow）指的是浏览器重新计算并更新元素的布局。当页面的结构或元素的尺寸、位置等发生改变时，浏览器会重新计算元素的布局，并重新排列它们的位置。重排的代价较高，因为它会影响整个文档流的重新布局，可能导致其他元素的重排和重绘。

重绘和重排的区别在于对页面的哪些部分进行了改变和更新：

重绘（Repaint）：

仅涉及元素的外观样式的改变，不影响布局。浏览器只需更新元素的绘制表面，不涉及重新计算元素的位置和大小。

重排（Reflow）：

涉及元素的布局改变，包括尺寸、位置和文档流的调整。浏览器需要重新计算并更新元素的布局，可能触发其他元素的重排和重绘。

由于重排涉及布局的重新计算和整个文档流的调整，它的性能开销较大，会导致页面的响应时间延长。因此，在前端开发中，应尽量减少重排的次数，优化页面性能。常见的优化方法包括使用 CSS3 的 transform 和 opacity 属性来触发 GPU 加速、批量更新 DOM、使用文档片段（DocumentFragment）等。

总结：

重绘（Repaint）：重新绘制元素的外观样式，不涉及布局的改变。
重排（Reflow）：重新计算并更新元素的布局，涉及布局的改变和文档流的调整。
重排的性能开销较大，应尽量减少重排的次数，优化页面性能。

方便记忆：

重绘就像给房子的某个地方重新涂刷油漆，增加边框修饰；
重排就像给房子的某个部分拆掉再建一遍，耗时耗力，还有影响到房子别的地方；