前言
此篇为翻译文章，原篇在这里:点击查看
渲染引擎
渲染引擎—-渲染引擎的职责当然是渲染。它负责将请求的内容显示在浏览器的窗口上。默认情况下，渲染引擎可以显示HTML文档和XML文档以及图片。但是它可以通过插件（一种浏览器扩展程序）来显示其他类型的资源。比如通过PDF查看器插件来显示PDF。我们会在单独的章节来讨论插件和扩展程序。在这章，我们将重点介绍——使用CSS格式化的HTML和图片的显示。
渲染引擎
我们引用的浏览器 - Firefox，Chrome和Safari都建立在这两个渲染引擎上。Firefox使用Gecko——Mozilla“自制”的渲染引擎。Safari和Chrome都采用的是Webkit。Webkit是一个开源渲染引擎，作为Linux平台的引擎开始，由Apple修改以支持Mac和Windows。
主要的流程
渲染引擎将从网络层开始获取所请求文档的内容，这通常会在8K大小的块中完成。
之后，下面就是渲染引擎的基本流程：
渲染引擎开始解析HTML文档，将其中的标签转变为名为“内容树”的DOM节点。例如：
<html>
<body>
<p> Hello World </p>
<div> <img src="example.png"/></div>
</body></html>将被翻译成下面的这个DOM树：
树的根节点是“document”对象。
接下来，渲染引擎将解析外部CSS文件和样式元素中的样式数据。样式信息和HTML将会被用来构建另一个树——渲染树。
渲染树包含具有颜色和尺寸等属性的盒子。 这些盒子以正确的顺序显示在屏幕上。
在渲染树构建结束后会经历一个“布局”的过程。这个过程意味着给每个节点它应该出现在屏幕上的准确的坐标。
下一个阶段就是绘制——渲染树将会被遍历，每个节点将使用UI后端层进行绘制。了解这个过程是很重要的。
为了更好的用户体验，渲染引擎将尽快在屏幕上显示内容。因此它不会等到所有的HTML都被解析后，才开始构建和布局渲染树。内容的一部分会被解析和显示，而流程将继续解析来自网络的其余内容。
主要流程示例
webkit主要流程：
Mozilla的Gecko的流程示例：
从以上两图可以看出，虽然Webkit和Gecko使用的术语略有不同，但流程基本相同。
- Gecko调用的是框架树。每个元素都是一个框架。Webkit使用的术语是渲染树，它由渲染对象组成（“Render Objects”）。
- Webkit使用术语“布局”来放置元素，而Gecko称它为“回流”。
- “附件”是Webkit连接DOM节点和样式信息来创建渲染树的术语。一个小的非语义差异是Gecko在HTML和DOM树之间有一个额外的层，它被称为“内容池”，是一个用于生成DOM元素的工厂。
下一章我们将会介绍渲染过程中非常重要的一部——解析，点击查看文章：《浏览器原理（三）——渲染过程之解析》
1900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
