浏览器的工做机制

1、概述

　　网络浏览器多是最普遍使用的软件了。本文中我将解释它们在幕后是如何工做的，咱们将看到从你在地址栏中输入“google.com”，直到谷歌的页面出如今浏览器屏幕的过程当中发生了什么。

　　一、咱们将要讨论的浏览器

　　如今主要有五种浏览器被使用，分别是：IE、火狐、Safari、Chrome和欧朋。根据W3C浏览器的统计资料，目前(2009年9月)，Firefox, Safari and Chrome浏览的使用份额总和将近有60%。

所以在当前，开源浏览器是浏览器市场的中坚力量。

　　二、浏览器的主要功能

　　浏览器主要的功能是展现你所选择的网络资源，经过向服务器请求并显示在浏览器的窗口中。资源的格式一般是HTML，或者PDF、image等等。资源的位置是由用户使用的URI(统一资源标识符)来指定的。浏览器解释和显示HTML文件的方式根据HTML和CSS规范来指定。这些规范是由W3C组织维护的，W3C是网络标准组织。

　　当前HTML的版本号是4(http://www.w3.org/TR/html401/)，版本5还在制定中。当前的CSS版本号是2(http://www.w3.org/TR/CSS2/)，版本3仍在制定中。多年来浏览器只遵循了规范的一部分，而且开发了他们本身的扩展。这给浏览器的使用者带来了严重的兼容性问题。如今绝大部分的浏览器都基本上遵循了规范。

　　浏览器的用户界面彼此有不少共同之处，其中常见的用户页面元素有：

• 写入URI的地址栏
• 后退和前进按钮
• 书签选项
• 用来刷新和中止加载当前文件的刷新和中止按钮

　　奇怪的是，浏览器的用户界面没有在任何正式的规范中指定，这些是多年来各浏览器厂商之间相互模仿和不断改进得结果。HTML5规范并无定义浏览器中必须具备的UI元素，包括地址栏、状态栏和工具栏。还有一些浏览器拥有本身特有的功能，像火狐的下载管理器。

　　三、浏览器的主要构成

　　浏览器的主要部件有：

1. 用户界面：包括地址栏、后退和前进按钮、书签菜单等等。也就是除了用来显示你请求页面的主窗口的其余部分。

2. 浏览器引擎：查询和操做渲染引擎的接口

3. 渲染引擎： 负责显示请求的内容，例如请求的是HTML内容，它负责解析HTML和CSS并将解析的内容显示在屏幕上。

4. 网络：用来网络调用，例如HTTP请求，它有平台无关的接口，能够在不一样的平台上工做。

5. 界面后端：用来绘制相似组合选择框及对话框等基本组件，具备不限定于某个平台的通用接口，底层使用操做系统的用户接口。

6. JS解释器：使用它来解析和执行JS代码。

7. 数据存储：属于持久层，浏览器须要将各类格式的数据保存在硬盘上，例如cookies。最新的HTML规范(HTML5)定义网络数据库是一种完整的轻量级客户端数据库。

　　下面为浏览器的主要构件示意图：

 

　　

　　ps:须要特别指出的是，不一样于大部分浏览器，Chrome为每一个标签分配了各自的渲染引擎实例，每一个标签就是一个独立的进程。

　　对于每个组件，我将在后面的章节中进行逐一阐述。

　　四、组件之间的通讯

　　Firefox和Chrome都开发了一套特殊的通讯结构，后面将有专门的一章进行讨论。

2、渲染引擎

　　渲染引擎的职责是…渲染，就是在浏览器屏幕上显示请求的内容。默认状况下，渲染引擎可以显示HTML和XML文件以及图片。经过插件(一种浏览器扩展)能够显示其它类型文件。例如经过使用PDF查看插件显示PDF文件。咱们将用一个章节来讨论插件和扩展。这里只讨论渲染引擎最主要的用途——显示应用了CSS以后的HTML和图片。

　　一、渲染引擎

　　咱们所讨论的浏览器：Firefox, Chrome 和 Safari是基于两种渲染器构建的。Firefox使用Gecko一种Mozilla自主研发的渲染引擎。afari 和 Chrome使用的都是Webkit。

　　Webkit是一种开源渲染引擎，它一开始是在Linux平台上使用的，后来被Apple改进并应用到Mac及Windows上，更多详情请参考http://webkit.org。

　　二、主要流程

　　渲染引擎首先从网络层获取请求的内容，一般以8K分块的方式完成。

　　下面是渲染引擎的基本流程：

　　

　　渲染引擎首先解析HTML文件，将标签转化为内容树的DOM节点。而后将解析外部CSS文件和style标签中的样式信息。这些样式信息和HTML中的可见性指令将会被用来构建另外一颗树—渲染树(渲染树由一些包含有颜色和大小等属性的矩形组成，这些矩形按照正确的顺序显示在屏幕上)。

　　渲染树构建好以后，将执行布局过程。这将出给每一个节点在屏幕上出现的确切坐标。接下来的步骤是绘制—遍历渲染树，并使用后端UI层绘制出每个节点。

　　值得一提的是，这是一个逐步的过程。为了更好的用户体验，渲染引擎将更可能早的将内容显示在屏幕上，而不会等到全部的HTML都解析完以后再去构建和布局渲染树，它是边解析边显示内容的，与此同时还可能经过网络下载余下内容。

　　三、主要流程实例

　　　　　　　　　　　　图 Webkit main flow

　　

 

　　　　　　　　　　　 图 Mozilla's Gecko rendering engine main flow

　　

　　经过上面两幅图能够看到尽管Webkit和Gecko使用稍微不一样的术语，可是流程基本是相同的。Gecko称可见的格式化元素组成的树为frame树。

　　每一个元素都是一个frame。webkit则使用“Render Tree”这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称链接DOM节点及样式信息去构建render树的过程为”attachment”，Gecko在html和dom树之间附加了一层，这层称为内容接收器，至关制造DOM元素的工厂。下面将讨论流程中的各个阶段。

三、解析和DOM树构建

　　一、解析-常规

　　由于解析是渲染引擎中一个很是重要的过程，咱们将更深刻研究一下它。让咱们首先介绍一下解析。

　　解析一个文件是将其转化为具备必定意义的结构—能够理解和使用的代码。解析的结果一般是一颗表示文件结构的节点树，称为解析树或语法树。

　　例子—解析表达式“2+3-1”，可能返回这样一颗树：

　　

　　语法

　　解析基于文档依据的语法规则-文档的语言或格式。每种可被解析的格式必须具备由词汇及语法规则组成的特定文法，称为上下文无关文法。人类语言不具备这一特性，所以不能经过经常使用的解析技术解析。

　　解析器-词法分析器

　　解析能够被分为两个子过程-语法分析和词法分析。

　　词法分析就是将输入分解为符号。符号是语言的词汇表-有效构建块的集合。对于人类而言，它至关因而咱们字典中出现的全部单词。

　　语法分析是指对语言应用语法规则。

　　解析器一般将工做分配给两个组件-词法分析器负责将输入分解为合法的符号，解析器负责按照语言的语法规则分析文档结构从而构建解析树。词法分析器知道怎么跳过空白和换行之类的无关字符。

　　

　　解析过程是迭代的。解析一般向词法分析器获取一个新的符号而后试图用这个符号去匹配一条语法规则。若是有一条规则被匹配到，那么这个符号对应的节点将会被添加到解析树中，而后请求另外一个符号。若是没有匹配到规则，解析器将在内部保存该符号并继续从词法分析器中获取符号直到全部内部保存的符号可以匹配一条规则。若是最终没有找到匹配的规则，解析器将会抛出一个异常，这意味着文档无效或者包含语法错误。

　　转换

　　不少时候解析树不是最终的结果。解析通常在转换中使用—将输入文档转化成另外一种格式。编译就是一个例子。编译器将源代码编译成机器码，首先将其解析为一颗解析树而后将树转换为机器码文档。

　　

　　解析实例

　　在图表5中，咱们从一个数学表达式中构建了一颗解析树。让咱们来定义一个简单的数学语言，看看解析的过程。

　　词汇表：咱们的语言能够包括整数，加号和减号。

　　语法：

　　　　一、该语言的语法基本单元包括表达式，术语和操做符。

　　　　二、该语言能够包括多个表达式

　　　　三、一个表达式定义为两个term经过一个操做符链接

　　　　四、一个操做符是一个加号或者一个减号

　　　　五、一个term是一个整数或是一个表达式

　　如今来分析一下“2+3-1”这个输入:

　　第一个匹配规则的子字符串是“2”，根据规则5这是一个term。第二个匹配的是“2+3”，一个term后跟着一个操做符再链接着另外一个term。下一个匹配在输入的结束处。“2+3-1”是一个表达式由于咱们已经知道?2+3?是一个term，因此咱们有了一个term紧跟着一个操做符及另外一个term。“2＋＋”将不会匹配任何规则，所以是一个无效输入

　　词汇和语法的正式定义

　　词汇一般经过正则表达式来表示。

　　例如咱们语法将会被定义成：　

　　INTEGER :0|[1-9][0-9]*

　　PLUS : +

　　MINUS: -
　　可见，整数经过一个正则表达式来定义。

　　语法一般以一种被称做BNF的格式来定义，咱们的语言将会被定义成：

　　expression :=  term  operation  term

　　operation :=  PLUS | MINUS

　　term := INTEGER | expression

　　咱们说若是一种语言若是它的语法是上下文无关文法，则能够经过解析器来解析。对于上下文无关文法的一个直观的定义是该文法可以用BNF来完整的表达。正式的定义可查阅http://en.wikipedia.org/wiki/Context-free_grammar

　　解析类型

　　有两种基础的解析器类型—自顶向下解析器和自底向上解析器。比较直观的解释是，自顶向下解析器是查看句法的最高层结构，而后尝试匹配其中一个，自底向上解析器从输入开始，而后逐步转换为句法规则，从底层规则开始直到匹配最高层规则。

　　咱们来看一下这两种类型的解析器是如何解析咱们的例子的：

　　自顶向上解析器从最高层规则开始—它将“2+3”做为一个表达式，而后识别“2+3-1”为一个表达式。

　　自底向上解析器将扫描输入直到匹配一条规则，而后用该规则取代匹配的输入，直到解析完全部输入。有一部分匹配的表达式被放在解析堆栈中。

　　

　　这种自底向上的类型被称为转换减小解析器，由于输入向右移动，而且逐渐简化为语法规则。

　　自动化解析器

　　有些工具能够产生一个解析器，它们被称为解析器生成器。你须要指定语言的语法—词汇表和句法规则，它就能够生成有一个解析器。建立一个解析器须要对解析有一个深刻的理解，手动去建立一个性能优良的解析器是不容易的，所以解析器生成器是很是有用的。

　　Webkit 使用了两个很著名的解析器生成器——用于建立语法分析器的Flex及建立解析器的Bison。Flex的输入是一个包含了符号定义的正则表达式，Bison的输入是用BNF格式表示的语法规则。

　　二、HTML解析器

　　三、CSS解析

　　四、处理脚本和样式表的顺序

4、构建渲染树

5、布局

6、备注

　　本文是由一篇外国文章翻译而成，外文地址连接为http://taligarsiel.com/Projects/howbrowserswork1.htm#The_browsers_we_will_talk_about。后续待更新。