浏览器工作原理（二）：渲染引擎的详细介绍

渲染引擎是干什么的

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件（所以想做浏览器插件的同学必须知道浏览器的工作原理），可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

渲染引擎

不同的浏览器有不同的渲染引擎，对于渲染引擎的使用总结如下：

• Trident(MSHTML)内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto内核：Opera7及以上
• Webkit内核：Safari,Chrome等

渲染主流程

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：

图2：渲染引擎基本流程

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。

接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。 

Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。

再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。 

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

图：webkit主流程

图：Mozilla的Geoko渲染引擎主流程

从上两图可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。

---------------------------------后面的章节将讨论流程中的各个阶段。---------------------------------