How Broswers Work<二>渲染引擎（1）

渲染引擎的工作当然是渲染，也就是说将用户请求的内容以特定的方式显示在浏览器显示窗口中。

浏览器默认会现实的格式是HTML，XML 文档和图片，他也能通过插件（浏览器的扩展）显示其他类型的内容，比如使用PDF显示插件可使浏览器显示PDF。我们将用专门的章节讲解插件，在本章节中，我们将重点讲解CSS是如何影响HTML以及图片的显示的。

渲染引擎

下面讲解涉及的浏览器-Firefox,Chrome和Safari 都内建两个渲染引擎。Firefox用的是自家的Gecko,Safari和Chrome用的是Webkit.

关于浏览器引擎的介绍在第一篇翻译中有详细的，想了解更多，参照第一篇

主要的过程

首先渲染引擎要从来自网络层的文档中获取内容，通常以8K分块的方式完成，之后的基本流程如下：



Figure 2:Rendering engine basic flow.

渲染引擎将开始解析HTML文档，将它标签转化成DOM节点并形成一棵DOM树也称“内容树”，随后解析数据的样式，包括文档外的css文件以及在文档内的元素的样式，这些样式信息也将建立一棵树-渲染树（the render tree).

渲染树有一些包含可见属性例如颜色和大小的矩阵组成，他们将以正确的顺序显示到屏幕。

建完渲染树后，渲染引擎将开始布局。这意味着将给每个节点准确的定位。在此之后就开始绘画，即将所有准备好的东西在浏览器中绘制出来-渲染引擎的工作完成啦，接下来就是UI Backend层的事啦。

理解这是一个平缓的过程很重要，就更好的用户体验来看，渲染引擎应该尽可能快的将内容绘制到屏幕上，它不会等待在HTML解析完成到渲染树建立完成的时间，当还有部分内容还在从网络层到达渲染引擎层的时候，内容的一部分将被解析并被显示到屏幕。

主要流程的例子



Figure 3: Webkit main flow



Figure 4: Mozilla’s Gecko rendering engine main flow

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