二、浏览器渲染引擎工作流程

1. 渲染引擎

浏览器解析HTML并显示在页面的工具。
负责获取网页的内容（HTML、XML、图片等信息）、
整理信息（比如加入CSS等）以及计算网页的显示方式然后输出至显示器。

2.渲染引擎工作流程

1. HTML解析器解析DOM树（同时CSS解析器解析样式）
2.渲染树结构（把DOM Tree和样式表关联起来，生成Render Tree,
具有一定的视觉效果，并按照一定顺序排列在屏幕上）
3. 布局渲染树（有了Render Tree后，为各个节点确定一个在显示器上出现的具体坐标）
4. 绘制DOM树（Render Tree和节点显示坐标都有了，然后调用每个节点的paint方法绘制出来）

webkit渲染引擎工作流程

Gecko渲染引擎工作流程

3. 疑问

1. Render Tree是DOM Tree和Style Rules构建完毕后才开始构建的吗？

不是相互独立的，而是相互交叉。一边加载，一边解析，一边渲染。

2. DOM Tree是文档加载完后构建的吗？

DOM Tree的构建是一个渐进过程，为了达到良好的用户体验，
渲染引擎会尽快将内容显示在屏幕上。

3. CSS的解析是逆向解析的，标签嵌套越深，解析越慢。