浏览器的渲染引擎

渲染引擎的任务是将请求的内容按照预置样式呈现于屏幕上，
默认情况下，渲染引擎可以展示HTML、XML文档和图像类型数据，如果想展示其他类型数据则需要安装相应的插件，例如可以使用PDF viewer插件来显示PDF文档。
Firefox、chrome以及Safari等浏览器主要基于两种渲染引擎。首先，Firefox使用的是由Mozilla原生的Gecko引擎。而chrome和Safari均使用webkit作为渲染引擎。
webkit是一种开源的引擎，在刚开始的时候主要基于linux平台，后来苹果公司为了使其支持Mac和windows系统对它做了一些修改。在
http://webkit.org/上可以获取更多相关信息。
渲染引擎的主要工作流
在渲染引擎开始工作前，浏览器首先从网络层得到请求页面的文档内容，这一过程通常是以每秒8k的数据量完成。
得到页面后，渲染引擎的基本工作流程如下图所示：

刚开始渲染引擎会解析HTML文档并将标签转化为文档树的DOM节点，然后开始解析样式数据，包括外部CSS和元素的内联样式。这些样式信息和存在于HTML中的视觉指令会构建起一个渲染树（render tree）。
渲染树包括一些像颜色，维度等视觉属性构成的盒模型元素，这些元素会按照其在文档流中所处的位置展示在屏幕中。
渲染树创建好后会经历一个布局（layout）的过程，在布局过程中会给每个node节点设置一个确切的展示在屏幕中的位置。布局完成后，下一个阶段就是绘制（painting）-解读渲染树然后在后端UI层（ UI backend)绘制每个DOM节点.
必须注意到这是一个渐进的过程，为了更好的用户体验，渲染树会试图以尽可能快的速度将文档内容展示给用户，所以它不会等到所有HTML完成解析才开始创建渲染树并布局。通常是一边解析并展示一部分HTML文档，一边通过网络层获取余下的文档内容。下面为大家展示一下webkit渲染的主流程简单示例。

以下是Mozilla的Gecko渲染的主工作流程示意图

从以上两幅图我们可以看出尽管webkit与Gecko使用术语有些许不同，但整体工作流是大致相同的。
Gecko称视觉化格式的元素为框架树，每个元素都是一个框架。webkit则使用由渲染对象组成的渲染树。webkit使用术语布局（layout）来表示确定元素位置而Gecko重使用排（reflow)。webkit用Attachment（附加）来表示把DOM节点以及视觉信息与创建渲染树连接起来。而Gecko在HTML和DOM树之间还有额外的一层，称之为“content sink”，用于创建DOM元素。在接下来的博文中我会详细介绍工作流中的每一部分。