浏览器的组成部分及运行原理

浏览器的结构

浏览器的抽象分层结构图中将浏览器分成了以下8个子系统：
用户界面（User Interface）
用户界面主要包括工具栏、地址栏、前进/后退按钮、书签菜单、可视化页面加载进度、智能下载处理、首选项、打印等。除了浏览器主窗口显示请求的页面之外，其他显示的部分都属于用户界面。
用户界面还可以与桌面环境集成，以提供浏览器会话管理或与其他桌面应用程序的通信。
浏览器引擎（Browser Engine）
浏览器引擎是一个可嵌入的组件，其为渲染引擎提供高级接口。
浏览器引擎可以加载一个给定的URI，并支持诸如：前进/后退/重新加载等浏览操作。
浏览器引擎提供查看浏览会话的各个方面的挂钩，例如：当前页面加载进度、JavaScript alert。
浏览器引擎还允许查询/修改渲染引擎设置。
渲染引擎（Rendering Engine）
渲染引擎为指定的URI生成可视化的表示。
渲染引擎能够显示HTML和XML文档，可选择CSS样式，以及嵌入式内容（如图片）。
渲染引擎能够准确计算页面布局，可使用“回流”算法逐步调整页面元素的位置。
渲染引擎内部包含HTML解析器。
网络（Networking）
网络系统实现HTTP和FTP等文件传输协议。 网络系统可以在不同的字符集之间进行转换，为文件解析MIME媒体类型。 网络系统可以实现最近检索资源的缓存功能。
JavaScript解释器（JavaScript Interpreter）
JavaScript解释器能够解释并执行嵌入在网页中的JavaScript（又称ECMAScript）代码。 为了安全起见，浏览器引擎或渲染引擎可能会禁用某些JavaScript功能，如弹出窗口的打开。
XML解析器（XML Parser）
XML解析器可以将XML文档解析成文档对象模型（Document Object Model，DOM）树。 XML解析器是浏览器架构中复用最多的子系统之一，几乎所有的浏览器实现都利用现有的XML解析器，而不是从头开始创建自己的XML解析器。
显示后端（Display Backend）
显示后端提供绘图和窗口原语，包括：用户界面控件集合、字体集合。
数据持久层（Data Persistence）
数据持久层将与浏览会话相关联的各种数据存储在硬盘上。
这些数据可能是诸如：书签、工具栏设置等这样的高级数据，也可能是诸如：Cookie，安全证书、缓存等这样的低级数据。
这里可能会产生一个疑问：功能相似的HTML解析器和XML解析器为什么前者划分在渲染引擎中，后者作为独立的系统？
原因：XML解析器对于系统来说，其功能并不是关键性的，但是从复用角度来说，XML解析器是一个通用的，可重用的组件，具有标准的，定义明确的接口。相比之下，HTML解析器通常与渲染引擎紧耦合。

渲染引擎
浏览器的组成模块众多，而渲染引擎则是浏览器中最重要的模块（渲染引擎有时候也被称为“浏览器内核”，这种说法并不严谨，不推荐使用）。目前，常见的渲染引擎有Trident、Gecko、WebKit等。下表所示为几种渲染引擎在不同浏览器中的应用：
渲染引擎浏览器
TridentIE、EdgeGeckoFirefoxWebKitSafari、Chromium/Chrome
渲染引擎工作流程
如下图所示为渲染引擎的渲染流程示意图，其以HTML/JavaScript/CSS等文件作为输入，以可视化内容作为输出。
Parsing HTML to Construct DOM Tree
渲染引擎使用HTML解析器（调用XML解析器）解析HTML（XML）文档，将各个HTML（XML）元素逐个转化成DOM节点，从而生成DOM树。同时，渲染引擎使用CSS解析器解析外部CSS文件以及HTML（XML）元素中的样式规则。元素中带有视觉指令的样式规则将用于下一步，以创建另一个树结构：渲染树。
Render Tree construction
渲染引擎使用第1步CSS解析器解析得到的样式规则，将其附着到DOM树上，从而构成渲染树。
渲染树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
Layout of Render Tree
渲染树构建完毕之后，进入本阶段进行“布局”，也就是为每个节点分配一个应出现在屏幕上的确切坐标。
Painting Render Tree
渲染引擎将遍历渲染树，并调用显示后端将每个节点绘制出来。
渲染引擎组成模块
下图所示为渲染引擎工作流程中各个步骤所对应的模块，其中第1步和第2步涉及到多个模块，并且耦合程度较高。这样的设计会为了达到更好的用户体验，渲染引擎尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后，就可以开始渲染树构建和布局设置。在不断接收和处理来自网络的其余内容的同时，渲染引擎会将部分内容解析并显示出来。

从图中可以看出，渲染引擎主要包含（或调用）的模块有：
HTML（XML）解析器解析
HTML（XML）文档，主要作用是将HTML（XML）文档转换成DOM树。
CSS解析器
将DOM中的各个元素对象进行计算，获取样式信息，用于渲染树的构建。
JavaScript解释器
使用JavaScript可以修改网页的内容、CSS规则等。JavaScript解释器能够解释JavaScript代码，并通过DOM接口和CSSOM接口来修改网页内容、样式规则，从而改变渲染结果。
布局
DOM创建之后，渲染引擎将其中的元素对象与样式规则进行结合，可以得到渲染树。布局则是针对渲染树，计算其各个元素的大小、位置等布局信息。
绘图
使用图形库将布局计算后的渲染树绘制成可视化的图像结果。