- HTML代码转化成DOM Tree
- CSS代码转化成CSSOM Tree(CSS Object Model)
- 结合DOM和CSSOM,生成一棵渲染树Render Tree(render tree能识别样式,render tree中每个node都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。)
- 生成布局(flow),将所有渲染树进行平面合成(!此步骤再次触发即回流)
- 将布局绘制(paint)在屏幕上(!此步骤再次触发即重绘)