浏览器解析渲染页面

浏览器解析渲染页面分为一下五个步骤：

1. 根据HTML解析出DOM树
2. 根据CSS解析生成CSS规则树
3. 结合DOM树和CSS规则树，生成渲染树
4. 根据渲染树计算每一个节点的信息
5. 根据计算好的信息绘制页面

根据HTML解析DOM树

• 根据HTML的内容，将标签按照结构解析成为DOM树，DOM树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
• 在读取HTML文档，构建DOM树的过程中，若遇到script标签，则DOM树的构建会暂停，直至脚本执行完毕。

根据CSS解析生成CSS规则树

• 解析CSS规则树时js 执行将暂停，直至CSS规则树就绪。
• 浏览器在CSS规则树生成之前不会进行渲染。

结合DOM树和CSS规则树，生成渲染树

• DOM树和CSS规则树全部准备好了以后，浏览器才会开始构建渲染树。
• 精简 CSS 并可以加快CSS规则树的构建，从而加快页面相应速度。

根据渲染树计算每一个节点的信息（布局）

• 布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
• 回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

根据计算好的信息绘制页面

• 绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
• 重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。
• 回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。