浏览器渲染HTML的步骤

 

 

 

1. HTML被HTML解析器解析成DOM Tree,CSS则被CSS解析器解析成CSSOM Tree`。

2. DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。

3. 节点信息计算(重排)，这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息生成布局。

4. 渲染绘制(重绘)，这个过程被叫做(Painting或者 Repaint)。即根据计算好的信息绘制整个页面。

5. Display显示到屏幕上

以上5步简述浏览器的一次渲染过程，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程。