声明：本文翻译自How Browser Work，我将会逐步发布所翻译的章节。
网页浏览器可以算得上世界使用范围最广的软件了，在这篇文章中，我将介绍下浏览器的内部工作机制。你将会理解从你在地址栏输入“google.com” 到你看到Google网站页面的这个期间究竟发生了什么。
1. 简介
1.1 浏览器
如今使用范围较广的浏览器有Internet Explorer，Firefox，Safari，Chrome和Opera。我将简单介绍几个开源浏览器——Firefox，Chrome，Safari（部分开源）。根据StatCounter browser statistics，现在（2011/08）Firefox，Safari，Chrome在全世界市场占有率已经接近60%。所以开源浏览器是浏览器市场中一只不可小觑的力量。
1.2 浏览器的主要功能
浏览器的主要功能是从web服务器上获取用户所请求的资源并展示在浏览器窗口中。在大多数情况下，用户所请求的资源是HTML文档，当然也可以是PDF，图片，音频等其他文件类型。资源的位置是采用URI（Uniform Resource Identifier）标识的。
浏览器解释、显示HTML文档的方式定义在HTML（http://www.w3.org/TR/REC-html40/）、CSS（http://www.w3.org/TR/CSS/）规范中。这些规范是由web标准化组织W3C维护的。
很多年前，很多浏览器开发商都只遵从了部分规范，并且发展出他们自己对标准的扩展，这导致了很多严重的兼容性问题。而现在，大部分浏览器都遵从了这些规范。
浏览器的用户界面大都类似，基本都包括了以下几个控件：
- 用于输入地址的地址栏
- 前进、返回按钮
- 加为书签功能选项
- 用于刷新、终止当前文档加载过程的按钮
- 用于返回主页面的按钮
1.3 浏览器架构概述
浏览器的主要组件见下图(1.1)：
1. 用户界面 - 包括地址栏，前进、后退按钮、加书签按钮等。包括了除了用于展示网页窗口的其他所有用户可以看见的部分。
2. 浏览器引擎 - 配置UI和渲染引擎之间动作
3. 渲染引擎 - 展示请求到的内容。例如，请求的资源是一个HTML文档，渲染引擎就会解析这个HTML文档和CSS并且把解析好的内容展示在网页窗口上。
4. Networking - 用于网络交互，例如HTTP 请求。它有一个独立于操作系统的接口，对于每个操作系统有不同实现。
5. 用户界面后台 - 用于绘制一些基本的控件如下拉框，单选框等。它暴露了一组平台独立的接口，在底层调用了操作系统的用户界面方法进行绘制组件。
6. JavaScript引擎 - 用于解释执行javascript
7. 数据存储 - 浏览器需要存储一些数据到本地磁盘上，例如cookie。新的HTML规范（HTML5）定义一个 web database ,提供一个嵌入浏览器中的完整的轻量级数据库。
图 1： 浏览器主要组件图
值得注意的是，Chrome浏览器与其他浏览器不同，它为每个tab创建了一个独立的渲染引擎，每个tab是一个独立的进程。
2. 渲染引擎
渲染引擎的职责当然就是渲染了，具体点就是把获取到的内容展示到屏幕上。
一般情况下，渲染引擎可以展示HTML、XML和图片，当然，可以通过安装插件或者浏览器扩展展示其他类型的内容。如通过安装PDF查看器插件展示PDF文件。当然，在本章，我们还是关注最主要的功能：展示应用了CSS的HTML、图片。
2.1 渲染引擎
Firefox、Chrome、Safari分别使用了两种渲染引擎。Firefox使用的是Gecko - 一个由Mozilla研发的渲染引擎。Safari和Chrome则都使用Webkit做为其渲染引擎。
Webkit最初是Linux上的开源渲染引擎，后来Apple对Webkit进行了修改使其支持Mac和Windows平台。更多详细信息请参见webkit.org。
2.2 主流程
渲染引擎会首先调用Networking获取被请求的文档的内容。一般文档会被划分为8k大小的块进行传输。
在此之后，渲染引擎的处理流程如下：
图 2：渲染引擎主流程
首先，渲染引擎会解析HTML文档构建DOM树，把遇到的HTML标记转换成“内容树”上的DOM节点。同时它也会解析外部CSS文件和HTML文档中的样式数据，然后根据这些样式数据和“内容树”创建另一棵树-“渲染树”。
渲染树包含一些带有颜色、大小信息的矩形，这些矩形按照其在屏幕上展示的顺序进行排列。
渲染树构建完成后，将进入“布局”环节，在这个环节中会给每个节点设置其将被展示的位置坐标。接下来将进入“显示”环节 - 遍历整个渲染树，通过用户界面后台把各个节点展示在屏幕上。
值得一提的是，这是个顺序的流程，为了获得更好的用户体验，渲染引擎会尽可能快地把内容显示在屏幕上。它不会等到所有的HTML文档解析完成才开始构建“渲染树”，当渲染引擎还在获取、解析其他内容时，已加载到的部分内容会先被展示在屏幕上。