问:
什么是重绘和重排?
回答:
重绘和重排是浏览器渲染过程中的两个重要环节,它们的发生顺序取决于页面元素的变化类型。
重绘(Repaint)和重排(Reflow)是浏览器在处理页面元素变化时的两种主要操作。重绘是指当元素的视觉属性(如颜色、背景等)发生变化,但不影响元素在页面上的位置和尺寸时,浏览器只需要重新绘制该元素,而不需要重新计算其在页面上的布局。重排则发生在元素的尺寸、位置、边距等几何属性发生变化时,浏览器需要重新计算页面上所有元素的布局,并可能影响到周围元素的布局。
在浏览器渲染过程中,如果页面元素的视觉属性发生变化(如颜色、背景等),首先触发的是重绘。如果元素的尺寸、位置、边距等几何属性发生变化,则会先触发重排,然后可能引发重绘。这是因为重排涉及更复杂的计算,需要重新计算页面上所有元素的布局,而重绘则相对简单,只是重新绘制元素。
因此,重绘通常发生在重排之后,因为重排可能先发生,导致页面布局的改变,进而可能触发重绘来更新视觉表现。这种顺序确保了页面元素的视觉变化能够正确地反映在屏幕上,同时最小化不必要的计算和渲染开销
页面渲染过程,重绘与回流_网页渲染时间是重绘时间吗-CSDN博客
问:
重绘和渲染那个先那个后?
回答:
通常是先进行重绘(即修改或重新创建图像的基本结构),然后再进行渲染(即添加细节和颜色)。这样可以确保图像的基本形态和细节都得到充分处理
问:
什么情况下会触发重绘或重排?
回答:
下面任何操作都会触发重绘或者重排:
增加或删除DOM节点
设置 display: none;(重排并重绘) 或者 visibility: hidden(只有重排)
移动页面中的元素
增加或者修改样式
用户 改变窗口大小,滚动页面等