浏览器的⼯工作原理：新式⺴⽹网络浏览器幕后揭秘
By  Tali Garsiel  and Paul Irish
已发布: ⼋八⽉月 5th, 2011
Comments: 132
这是⼀一篇全⾯面介绍 WebKit 和 Gecko 内部操作的⼊入⻔门⽂文章，是以⾊列开发⼈人员塔利·加希尔⼤大量研究的成果。在过去的⼏几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参⻅见资源），并花了很多时间来研读⺴⽹网络浏览器的源代码。她写道：塔利在她的⺴⽹网站上公布了⾃自⼰己的研究成果，但是我们觉得它值得让更多的⼈人来了解，所以我们在此重新整理并公布。
作为⼀一名⺴⽹网络开发⼈人员，学习浏览器的内部⼯工作原理将有助于您作出更明智的决策，并理解那些最佳开发实践的个中缘由。尽管这是⼀一篇相当⻓长的⽂文档，但是我们建议您花些时间来仔细阅读；读完之后，您肯定会觉得所费不虚。
保罗·爱丽诗 (Paul Irish)，Chrome 浏览器开发⼈人员事务部
⺴⽹网络浏览器很可能是使⽤用最⼲⼴广的软件。在这篇⼊入⻔门⽂文章中，我将会介绍它们的幕后⼯工
作原理。我们会了解到，从您在地址栏输⼊入 google  直到您在浏览器屏幕上看到Google ⾸首⻚页的整个过程中都发⽣生了些什么。
1. 简介
1. 我们要讨论的浏览器
序⾔言
在 IE 占据 90% 市场份额的年代，我们除了把浏览器当成⼀一个“⿊黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了过半的市场份额，因此，是时候来揭开神秘的⾯面纱，⼀一探⺴⽹网络浏览器的内幕了。呃，⾥里⾯面只有数以百万⾏行计的 C++ 代码...简介
⺫⽬目录
2. 浏览器的主要功能
3. 浏览器的⾼高层结构
2. 呈现引擎
1. 呈现引擎
2. 主流程
3. 主流程⽰示例
3. 解析和 DOM 树构建
1. 解析 - 综述
1. 语法
2. 解析器和词法分析器的组合
3. 翻译
4. 解析⽰示例
5. 词汇和语法的正式定义
6. 解析器类型
7. ⾃自动⽣生成解析器
2. HTML 解析器
1. HTML 语法定义
2. ⾮非与上下⽂文⽆无关的语法
3. HTML DTD
4. DOM
5. 解析算法
6. 标记化算法
7. 树构建算法
8. 解析结束后的操作
9. 浏览器的容错机制
3. CSS 解析
1. WebKit CSS 解析器
4. 处理脚本和样式表的顺序
1. 脚本
2. 预解析
3. 样式表
4. 呈现树构建
1. 呈现树和 DOM 树的关系
2. 构建呈现树的流程
3. 样式计算
1. 共享样式数据
2. Firefox 规则树
1. 结构划分
2. 使⽤用规则树计算样式上下⽂文
3. 对规则进⾏行处理以简化匹配
4. 以正确的层叠顺序应⽤用规则
1. 样式表层叠顺序
2. 特异性
3. 规则排序
4. 渐进式处理
5. 布局
1. Dirty 位系统
2. 全局布局和增量布局
3. 异步布局和同步布局
4. 优化
5. 布局处理
6. 宽度计算
7. 换⾏行
6. 绘制
1. 全局绘制和增量绘制
2. 绘制顺序
3. Firefox 显⽰示列表
4. WebKit 矩形存储
7. 动态变化
8. 呈现引擎的线程
1. 事件循环
9. CSS2 可视化模型
1. 画布
2. CSS 框模型
3. 定位⽅方案
4. 框类型
5. 定位
1. 相对定位
2. 浮动定位
3. 绝对定位和固定定位
6. 分层展⽰示
10. 资源
我们要讨论的浏览器
⺫⽬目前使⽤用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和Opera。本⽂文中以开放源代码浏览器为例，即 Firefox、Chrome 浏览器和 Safari（部分开源）。根据StatCounter 浏览器统计数据，⺫⽬目前（2011 年 8 ⽉月）Firefox、Safari 和
Chrome 浏览器的总市场占有率将近 60%。由此可⻅见，如今开放源代码浏览器在浏览器市场中占据了⾮非常坚实的部分。
浏览器的主要功能
浏览器的主要功能就是向服务器发出请求，在浏览器窗⼝口中展⽰示您选择的⺴⽹网络资源。这⾥里所说的资源⼀一般是指 HTML ⽂文档，也可以是 PDF、图⽚片或其他的类型。资源的位置由⽤用户使⽤用 URI（统⼀一资源标⽰示符）指定。
浏览器解释并显⽰示 HTML ⽂文件的⽅方式是在 HTML 和 CSS 规范中指定的。这些规范由⺴⽹网络标准化组织W3C（万维⺴⽹网联盟）进⾏行维护。
多年以来，各浏览器都没有完全遵从这些规范，同时还在开发⾃自⼰己独有的扩展程序，这给⺴⽹网络开发⼈人员带来了严重的兼容性问题。如今，⼤大多数的浏览器都是或多或少地遵从规范。
浏览器的⽤用户界⾯面有很多彼此相同的元素，其中包括：
⽤用来输⼊入 URI 的地址栏
前进和后退按钮
书签设置选项
开放源代码意味着什么⽤用于刷新和停⽌止加载当前⽂文档的刷新和停⽌止按钮
⽤用于返回主⻚页的主⻚页按钮
奇怪的是，浏览器的⽤用户界⾯面并没有任何正式的规范，这是多年来的最佳实践⾃自然发展以及彼此之间相互模仿的结果。HTML5 也没有定义浏览器必须具有的⽤用户界⾯面元素，但列出了⼀一些通⽤
用的元素，例如地址栏、状态栏和⼯工具栏等。当然，各浏览器也可以有⾃自⼰己独特的功能，⽐比如 Firefox 的下载管理器。
浏览器的⾼高层结构
浏览器的主要组件为 (1.1)：
1. ⽤用户界⾯面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗⼝口显⽰示的
您请求的⻚页⾯面外，其他显⽰示的各个部分都属于⽤用户界⾯面。
2. 浏览器引擎 - 在⽤用户界⾯面和呈现引擎之间传送指令。
3. 呈现引擎 - 负责显⽰示请求的内容。如果请求的内容是 HTML，它就负责解析
HTML 和 CSS 内容，并将解析后的内容显⽰示在屏幕上。
4. ⺴⽹网络 - ⽤用于⺴⽹网络调⽤用，⽐比如 HTTP 请求。其接⼝口与平台⽆无关，并为所有平台提供
底层实现。
5. ⽤用户界⾯面后端 - ⽤用于绘制基本的窗⼝口⼩小部件，⽐比如组合框和窗⼝口。其公开了与平
台⽆无关的通⽤用接⼝口，⽽而在底层使⽤用操作系统的⽤用户界⾯面⽅方法。
6. JavaScript 解释器。⽤用于解析和执⾏行 JavaScript 代码。
7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的
HTML 规范 (HTML5) 定义了“⺴⽹网络数据库”，这是⼀一个完整（但是轻便）的浏览器内数据库。
图：浏览器的主要组件。
值得注意的是，和⼤大多数浏览器不同，Chrome 浏览器的每个标签⻚页都分别对应⼀一个呈现引擎实例。每个标签⻚页都是⼀一个独⽴立的进程。
呈现引擎
呈现引擎的作⽤用嘛...当然就是“呈现”了，也就是在浏览器的屏幕上显⽰示请求的内容。
默认情况下，呈现引擎可显⽰示 HTML 和 XML ⽂文档与图⽚片。通过插件（或浏览器扩展程序），还可以显⽰示其他类型的内容；例如，使⽤用 PDF 查看器插件就能显⽰示 PDF ⽂文档。但是在本章中，我们将集中介绍其主要⽤用途：显⽰示使⽤用 CSS 格式化的 HTML 内容和图⽚片。
呈现引擎
本⽂文所讨论的浏览器（Firefox、Chrome 浏览器和 Safari）是基于两种呈现引擎构建的。Firefox 使⽤用的是 Gecko，这是 Mozilla 公司“⾃自制”的呈现引擎。⽽而 Safari 和Chrome 浏览器使⽤用的都是 WebKit。
WebKit 是⼀一种开放源代码呈现引擎，起初⽤用于 Linux 平台，随后由 Apple 公司进⾏行修