浏览器如何运作

浏览器的主要功能

浏览器的主要功能是通过向服务器请求并在浏览器窗口中显示它来显示您选择的Web资源。资源格式通常是HTML，但也可以是PDF，图像等。用户使用URI（统一资源标识符）指定资源的位置。有关网络这一章的更多信息。

浏览器解释和显示HTML文件的方式在HTML和CSS规范中指定。这些规范由W3C（万维网联盟）组织维护，该组织是Web的标准组织。

浏览器的用户界面有很多共同点。常见的用户界面元素包括：

• 用于插入URI的地址栏
• 后退和前进按钮
• 书签选项
• 刷新和停止按钮，用于刷新和停止当前文档的加载
• 主页按钮可将您带到主页

奇怪的是，没有在任何正式规范中指定浏览器的用户界面，这只是多年实践中形成的良好做法，而且浏览器相互模仿。HTML5规范没有定义浏览器必须具有的UI元素，而是列出了一些常见的元素。其中包括地址栏，状态栏和工具栏。当然，某些浏览器（例如Firefox下载管理器）具有一些独特的功能。
有关更多信息，请参见用户界面一章。

 

浏览器的高级结构

浏览器的主要组件是（1.1）：

1. 用户界面-包括地址栏，后退/前进按钮，书签菜单等。浏览器的每个部分都会显示，但在主窗口中您可以看到所请求的页面。
2. 浏览器引擎-用于查询和操作渲染引擎的界面。
3. 呈现引擎-负责显示请求的内容。例如，如果请求的内容是HTML，则它负责解析HTML和CSS并在屏幕上显示解析的内容。
4. 联网-用于网络调用，例如HTTP请求。它具有独立于平台的界面，并且在每个平台的实施之下。
5. UI后端-用于绘制基本小部件，例如组合框和窗口。它公开了不是平台特定的通用接口。它的下面使用操作系统的用户界面方法。
6. JavaScript解释器。用于解析和执行JavaScript代码。
7. 数据存储。这是一个持久层。浏览器需要将各种数据保存在硬盘上，例如cookie。新的HTML规范（HTML5）定义了“网络数据库”，它是浏览器中完整的数据库（尽管很轻）。

 

图1：浏览器主要组件。

需要特别注意的是，与大多数浏览器不同，Chrome拥有多个渲染引擎实例-每个选项卡一个。每个选项卡是一个单独的过程。

我将为这些组件中的每一个专门写一章。

组件之间的通讯

Firefox和Chrome都开发了特殊的通信基础结构。
它们将在特殊的章节中讨论。

渲染引擎

呈现引擎的职责很好...呈现，即在浏览器屏幕上显示请求的内容。

默认情况下，呈现引擎可以显示HTML和XML文档和图像。它可以通过插件（浏览器扩展）显示其他类型。一个示例是使用PDF查看器插件显示PDF。我们将在特殊的章节中讨论插件和扩展。在本章中，我们将重点介绍主要用例-显示使用CSS格式化的HTML和图像。

渲染引擎

我们的参考浏览器-Firefox，Chrome和Safari基于两个渲染引擎构建。Firefox使用Gecko-一种“自制” Mozilla渲染引擎。Safari和Chrome都使用Webkit。

Webkit是一个开源渲染引擎，最初是Linux平台的引擎，后来被Apple修改为支持Mac和Windows。有关更多详细信息，请参见http://webkit.org/。

主要流程

呈现引擎将开始从网络层获取请求的文档的内容。通常以8K块完成。

之后，这是渲染引擎的基本流程：

图2：渲染引擎​​的基本流程。

 

呈现引擎将开始解析HTML文档，并将标记转换为称为“内容树”的树中的DOM节点。它将解析外部CSS文件和样式元素中的样式数据。HTML中的样式信息以及视觉指令将用于创建另一棵树- 渲染树。

渲染树包含具有视觉属性（如颜色和尺寸）的矩形。矩形以正确的顺序显示在屏幕上。

构建渲染树后，它会经历“ 布局 ”过程。这意味着为每个节点提供应在屏幕上显示的确切坐标。下一步是绘画 -将遍历渲染树，并将使用UI后端层绘画每个节点。

重要的是要了解这是一个循序渐进的过程。为了获得更好的用户体验，渲染引擎将尝试尽快在屏幕上显示内容。它不会等到所有HTML解析完毕后才开始构建和布局渲染树。内容的一部分将被解析并显示，而该过程将继续处理其余的内容，这些其余的内容始终来自网络。

主要流程示例

 

图3：Webkit主流程

图4：Mozilla的Gecko渲染引擎的主要流程（3.6）

从图3和4中可以看到，尽管Webkit和Gecko使用的术语略有不同，但是流程基本上是相同的。
壁虎称其为视觉格式化元素树-框架树。每个元素都是一个框架。Webkit使用术语“渲染树”，它由“渲染对象”组成。Webkit使用术语“布局”来放置元素，而Gecko则将其称为“重排”。“附件”是Webkit的术语，用于连接DOM节点和可视信息以创建渲染树。一个小的非语义差异是Gecko在HTML和DOM树之间有一个额外的层。它被称为“内容接收器”，是制造DOM元素的工厂。我们将讨论流程的每个部分：

 

解析-一般

 

由于解析是渲染引擎中非常重要的过程，因此我们将对其进行更深入的研究。让我们从一些有关解析的介绍开始。

解析文档意味着将其转换为有意义的结构-代码可以理解和使用的结构。解析的结果通常是代表文档结构的节点树。它称为解析树或语法树。

示例-解析表达式“ 2 + 3-1”可能返回以下树：

图5：数学表达式树节点

 

文法

解析基于文档所遵循的语法规则-文档所使用的语言或格式。您可以解析的每种格式都必须具有由词汇和语法规则组成的确定性语法。这称为 上下文无关文法。人类语言不是这种语言，因此无法使用常规解析技术进行解析。

解析器-Lexer组合

解析可以分为两个子过程-词法分析和语法分析。

词法分析是将输入分解为标记的过程。令牌是语言词汇-有效构件的集合。在人类语言中，它将由出现在该语言词典中的所有单词组成。

语法分析是语言语法规则的应用。

解析器通常将工作划分为两个部分：负责将输入分解为有效令牌的词法分析器（有时称为令牌生成器），以及根据语言语法规则通过分析文档结构来负责构造解析树的解析器。词法分析器知道如何去除不相关的字符，例如空格和换行符。

图6：从源文档到解析树

 

解析过程是迭代的。解析器通常会向词法分析器询问新的令牌，并尝试将令牌与语法规则之一进行匹配。如果规则匹配，则与令牌相对应的节点将被添加到解析树中，解析器将请求另一个令牌。
如果没有规则匹配，则解析器将在内部存储令牌，并继续请求令牌，直到找到与所有内部存储的令牌匹配的规则。如果找不到规则，则解析器将引发异常。这意味着文档无效并且包含语法错误。

翻译

很多时候，解析树不是最终产品。解析通常用于翻译-将输入文档转换为另一种格式。一个例子是编译。将源代码编译为机器代码的编译器首先将其解析为解析树，然后将其转换为机器代码文档。

图7：编译流程

解析示例

在图5中，我们根据数学表达式构建了一个解析树。让我们尝试定义一种简单的数学语言并查看解析过程。

 

词汇：我们的语言可以包括整数，加号和减号。

句法：

1. 语言语法构建块是表达式，术语和运算。
2. 我们的语言可以包含任意数量的表达式。
3. 表达式被定义为“项”，后跟“运算”，后跟另一项
4. 运算是加号或减号
5. 术语是整数标记或表达式

 

让我们分析输入“ 2 + 3-1”。
与规则匹配的第一个子字符串是“ 2”，根据规则5，它是一个术语。第二个匹配项是“ 2 + 3”，它匹配第二个规则-一个术语，后跟一个运算符，另一个术语。下一场比赛将只在输入的末尾打。“ 2 + 3-1”是一个表达式，因为我们已经知道？2 + 3？是一个术语，所以我们有一个术语，后跟一个运算符，再跟另一个术语。“ 2 + +”将不匹配任何规则，因此是无效输入。

词汇和语法的形式定义

词汇通常用正则表达式表示。

例如，我们的语言将被定义为：

整数：0 | [1-9] [0-9] *
加：+
减号：-

如您所见，整数是由正则表达式定义的。

 

语法通常以称为BNF的格式定义。我们的语言将定义为：

表达式：=术语操作术语
操作：=加号| 减去
字词：=整数| 表达

 

我们说过，如果一种语言的语法是上下文释放语法，则可以由常规解析器对其进行解析。上下文无关文法的直观定义是可以完全用BNF表示的文法。有关正式定义，请参见 http://en.wikipedia.org/wiki/Context-free_grammar

解析器的类型

解析器有两种基本类型-自上而下的解析器和自下而上的解析器。直观的解释是自上而下的解析器会看到语法的高级结构，并尝试匹配其中之一。自下而上的解析器从输入开始，并逐渐将其转换为语法规则，从低级规则开始直到满足高级规则。

让我们看看两种类型的解析器将如何解析我们的示例：

自上而下的解析器将从更高级别的规则开始-它将“ 2 + 3”标识为表达式。然后它将标识“ 2 + 3-1”作为一个表达式（标识该表达式的过程会与其他规则匹配，但是起点是最高级别的规则）。

自下而上的解析器将扫描输入，直到匹配规则为止，然后将匹配的输入替换为规则。这将一直持续到输入结束。部分匹配的表达式放在解析器堆栈上。

堆	输入项
	2 + 3-1
术语	+ 3-1
定期操作	3-1
表达	-1
表达操作	1个
表达

这种类型的自底向上解析器称为移位缩减解析器，因为输入向右移动（想象一个指针首先指向输入起点并向右移动），并逐渐减少为语法规则。

自动生成解析器

有一些工具可以为您生成解析器。它们被称为解析器生成器。您用他们的语言语法-词汇和语法规则来给它们喂食，它们会生成一个有效的解析器。创建解析器需要对解析有深刻的理解，并且手工创建优化的解析器并不容易，因此解析器生成器可能非常有用。

Webkit使用两个众所周知的解析器生成器-Flex用于创建词法分析器，而Bison用于创建解析器（您可能会以Lex和Yacc的名称遇到它们）。Flex输入是一个包含标记的正则表达式定义的文件。Bison的输入是BNF格式的语言语法规则。