浏览器渲染机制、重绘、重排

1、渲染

1.解析：html和css被解析

2.构建DOM：html被html解析器解析成DOM树

3.构建CSSDOM树：css被css解析器解析成CSS规则树

4.js脚本执行

5.渲染树构建：将HTML和CSS合成render树

6.布局（重绘重排）：生成布局(flow),即将所有渲染树的所有节点进行平面合成

7.绘制：将布局绘制到屏幕上

2、重绘

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。

触发：
改变元素的color、background、box-shadow等属性

3、重排

当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

触发：

添加或者删除可见的DOM元素
元素尺寸改变边距、填充、边框、宽度和高度

• 重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）