重绘:
重绘指更改外观属性而不影响几何属性的渲染。相比回流,重绘在两者中会温和一些
- 渲染树的节点发生改变,但不影响该节点的几何属性。由此可见,回流对浏览器性能的消耗是高于重绘的,而且回流一定会伴随重绘,重绘却不一定伴随回流。
- 为何回流一定会伴随重绘呢?整个节点的位置都变了,肯定要重新渲染它的外观属性啊!
回流:
回流又名重排,指几何属性需改变的渲染,可理解成,将整个网页填白,对内容重新渲染一次。
- 只不过以人眼的感官速度去看浏览器回流是不会有任何变化的,若你拥有非人的感官速度去看浏览器回流(实质是将时间调慢),就会发现每次回流都会将页面清空,再从左上角第一个像素点从左到右从上到下这样一点一点渲染,直至右下角最后一个像素点。每次回流都会呈现该过程,只是感受不到而已。
渲染树的节点发生改变,影响了该节点的几何属性,导致该节点位置发生变化,此时就会触发浏览器回流并重新生成渲染树。回流意味着节点的几何属性改变,需重新计算并生成渲染树,导致渲染树的全部或部分发生变化