介绍下浏览器的重绘和回流(Repaint & Reflow)

了解重绘和回流之前,先了解以下几个知识点

1. DOM树

DOM叫文档结构模型。浏览器把网页中的html代码解析成一个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象 。dom树里面包含了所有的html tag,包括display:none隐藏的节点opacity:0的节点和用JS动态添加的元素等。
image

2. CSSOM树

CSSOM叫样式结构模型。浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式。

3. render树

DOM树和CSSOM树结合以后,就生成render树,但是render树会抛弃head节点和display:none的节点,因为这些节点都 不会参与render,所以render树中会抛弃这些节点(opacity:0的节点会保留,因为他仍然占位)

image

现在介绍什么叫回流和重绘:

回流

回流,也叫重排,render树,需要绘制成一张网页,那么render树中所有节点,都需要根据style中的样式,排列到网页中指定位置中去,呈现出来才是正确的网页。这个排列的过程就叫回流,也叫重排。

重绘

在render树回流的过程中,不仅需要将style中决定位置的样式排列到网页指定位置,还需要将style中决定颜色,字体,opacity显隐等这些属性渲染,使网页有颜色有样式。这一过程,就叫做重绘。

所以得出结论,重绘只是绘制改变了元素的颜色,字体等,并无元素位置的绘制。并且,render树执行回流,会自动执行重绘。

举个形象的例子,我们在学校开运动会,观众坐在看台上,有时需要用颜色板拼一些加油助威的图案,那么,观众进场按位置落座这一过程,可以理解为回流(重排),观众举起颜色板,或者更换颜色板,会生成新的图案,但是每个观众位置并没改变。这时候,可以理解为重绘。

image