浏览器工作原理

作为前端，了解浏览器的工作原理还是很有必要的，这篇文章可以帮助我们把很多前端知识串起来，读了之后受益良多，所以转了过来。文章非常长，译文的 排版不是很清晰，我对照原文重新排了个版，并且修正了一些明显的翻译问题，本文省略了原文中文法解析部分，因为感觉这部分太深入了，对前端工作帮助不大； 如果对这部分感兴趣可以查看原文或译文
原文在这里：http://taligarsiel.com/Projects/howbrowserswork1.htm
译文在这里：http://blog.csdn.net/zzzaquarius/article/details/6532299

一、简介

浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。

1.将讨论的浏览器
今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。
本文将基于一些开源浏览器的例子——Firefox、 Chrome及Safari，Safari是部分开源的。
根据W3C（World Wide Web Consortium 万维网联盟）的浏览器统计数据，当前(2011年9月)，Firefox、Safari及Chrome的市场占有率综合已快接近50％。(原文为2009 年10月，数据没有太大变化)因此，可以说开源浏览器将近占据了浏览器市场的半壁江山。

2.浏览器的主要功能
浏览器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、 image及其他格式。用户用URI(Uniform Resource Identifier 统一资源标识符)来指定所请求资源的位置。
HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。
HTML规范的最新版本是HTML4(http://www.w3.org/TR/html401/)，HTML5还在制定中(译注：两年前)，最新的 CSS规范版本是2(http://www.w3.org/TR/CSS2)，CSS3也还正在制定中(译注：同样两年前)。
这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web开发者带来了严重的兼容性问题。
但是，浏览器的用户界面则差不多，常见的用户界面元素包括：

• 用来输入URI的地址栏
• 前进、后退按钮
• 书签选项
• 用于刷新及暂停当前加载文档的刷新、暂停按钮
• 用于到达主页的主页按钮

奇怪的是，并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂商之间相互模仿和不断改进得结果。

HTML5并没有规定浏览器必须具有的UI元素，但列出了一些常用元素，包括地址栏、状态栏及工具栏。还有一些浏览器有自己专有得功能，比如Firefox得下载管理。更多相关内容将在后面讨论用户界面时介绍。

3.浏览器的主要构成
浏览器的主要组件包括：

• 用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
• 浏览器引擎－ 用来查询及操作渲染引擎的接口
• 渲染引擎－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来
• 网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
• UI后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
• JS解释器－ 用来解释执行JS代码
• 数据存储－ 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，同样是一种轻量级完整的客户端存储技术

上图：浏览器主要组件

需要注意的是，不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。
对于构成浏览器的这些组件，后面会逐一详细讨论。

4.组件间的通信(Communication between the components)
Firefox和Chrome都开发了一个特殊的通信结构，后面将有专门的一章进行讨论。

二、渲染引擎(The rendering engine)

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。
默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件(一种浏览器扩展)显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

1.渲染引擎(Rendering engines)
本文所讨论得浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Gecko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。
Webkit是一款开源渲染引擎，它本来是为linux平台研发的，后来由Apple移植到Mac及Windows上，相关内容请参考http://webkit.org。

2.主流程(The main flow)
渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。
下面是渲染引擎在取得内容之后的基本流程：
解析html以构建dom树->构建render树->布局render树->绘制render树

上图：渲染引擎基本流程

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

3.主流程图(Main flow examples)

上图：webkit主流程

上图：Mozilla的Geoko 渲染引擎主流程

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

4.语法解析与构造DOM树(Parsing and DOM tree construction)

4.1 解析(Parsing－general)
解析原理介绍，略……

4.2 HTML解析器(HTML Parser)
HTML解析器的工作是将html标识解析为解析树。

4.2.1HTML文法定义(The HTML grammar definition)
W3C组织制定规范定义了HTML的词汇表和语法。

4.2.2 非上下文无关文法(Not a context free grammar)
正如在解析简介中提到的，上下文无关文法的语法可以用类似BNF的格式来定义。
不幸的是，所有的传统解析方式都不适用于html(当然我提出它们并不只是因为好玩，它们将用来解析css和js)，html不能简单的用解析所需的上下文无关文法来定义。
Html 有一个正式的格式定义——DTD(Document Type Definition 文档类型定义)——但它并不是上下文无关文法，html更接近于xml，现在有很多可用的xml解析器，html有个xml的变体——xhtml，它们间 的不同在于，html更宽容，它允许忽略一些特定标签，有时可以省略开始或结束标签。总的来说，它是一种soft语法，不像xml呆板、固执。
显然，这个看起来很小的差异却带来了很大的不同。一方面，这是html流行的原因——它的宽容使web开发人员的工作更加轻松，但另一方面，这也使很难去写一个格式化的文法。所以，html的解析并不简单，它既不能用传统的解析器解析，也不能用xml解析器解析。

4.2.3 HTML DTD
Html适用DTD格式进行定义，这一格式是用于定义SGML家族的语言，包括了对所有允许元素及它们的属性和层次关系的定义。正如前面提到的，html DTD并没有生成一种上下文无关文法。
DTD有一些变种，标准模式只遵守规范，而其他模式则包含了对浏览器过去所使用标签的支持，这么做是为了兼容以前内容。最新的标准DTD在http://www.w3.org/TR/html4/strict.dtd