重绘、渲染、重排

问：

什么是重绘和重排？

回答：

重绘和重排是浏览器渲染过程中的两个重要环节，它们的发生顺序取决于页面元素的变化类型。‌

重绘（Repaint）和重排（Reflow）是浏览器在处理页面元素变化时的两种主要操作。重绘是指当元素的视觉属性（如颜色、背景等）发生变化，但不影响元素在页面上的位置和尺寸时，浏览器只需要重新绘制该元素，而不需要重新计算其在页面上的布局。重排则发生在元素的尺寸、位置、边距等几何属性发生变化时，浏览器需要重新计算页面上所有元素的布局，并可能影响到周围元素的布局。

在浏览器渲染过程中，如果页面元素的视觉属性发生变化（如颜色、背景等），首先触发的是重绘。如果元素的尺寸、位置、边距等几何属性发生变化，则会先触发重排，然后可能引发重绘。这是因为重排涉及更复杂的计算，需要重新计算页面上所有元素的布局，而重绘则相对简单，只是重新绘制元素。

因此，‌重绘通常发生在重排之后‌，因为重排可能先发生，导致页面布局的改变，进而可能触发重绘来更新视觉表现。这种顺序确保了页面元素的视觉变化能够正确地反映在屏幕上，同时最小化不必要的计算和渲染开销‌

页面渲染过程，重绘与回流_网页渲染时间是重绘时间吗-CSDN博客

问：

重绘和渲染那个先那个后？

回答：

通常是先进行重绘（即修改或重新创建图像的基本结构），然后再进行渲染（即添加细节和颜色）。这样可以确保图像的基本形态和细节都得到充分处理

问：

什么情况下会触发重绘或重排？

回答：

下面任何操作都会触发重绘或者重排：

增加或删除DOM节点
设置 display: none;（重排并重绘） 或者 visibility: hidden（只有重排）
移动页面中的元素
增加或者修改样式
用户 改变窗口大小，滚动页面等

浏览器渲染页面的过程，以及重绘和重排_简述浏览器的渲染过程,重绘和重排在渲染过程中的哪一部分?-CSDN博客