探索主流浏览器工作原理：从URI到用户界面

5星 · 超过95%的资源需积分: 20 124 浏览量更新于2024-07-29 1 收藏 1.65MB PDF 举报

"本文将深入探讨web浏览器的工作原理，主要关注主流的IE、Firefox、Safari、Chrome以及Opera浏览器。虽然Safari部分开源，但截至2011年9月，Firefox、Safari和Chrome的市场份额之和接近50%，显示出开源浏览器在市场上的显著影响力。浏览器的核心功能在于接收用户通过URI指定的网络资源请求，通常以HTML为主，还包括PDF、图片等其他格式，这些内容由W3C维护的HTML和CSS规范指导浏览器如何解析和展示。 HTML4是当时的标准，而HTML5仍在制定中，CSS2作为当时的最新版本，CSS3也在同步发展中。然而，浏览器厂商为了提供额外功能，对规范的遵循并不完全一致，导致了开发者在实现跨浏览器兼容性上面临挑战。尽管没有官方明确的用户界面规范，但浏览器普遍包含类似地址栏、前进/后退按钮、书签、刷新/暂停按钮和主页按钮等基本元素，这些元素的进化反映了多年来的竞争与改进。 HTML5虽未强制规定所有UI元素，但它确实列出了建议的通用组件，如地址栏、状态栏和工具栏。同时，每个浏览器可能有自己的特色功能，例如Firefox的下载管理器。后续章节将进一步探讨浏览器的用户界面设计及其对开发者的启示。理解浏览器的工作原理对于开发者来说至关重要，因为它直接影响到网页的呈现效果和用户体验，尤其是在追求兼容性和创新设计的道路上。"

图 7 ：编译流程

解析实例 Parsing

Parsing

Parsing example

example

图 5 中，我们从一个数学表达式构建了一个解析树，这里定义一个简单的数学语言来看下解

析过程。

词汇表：我们的语言包括整数、加号及减号。

语法：

1. 该语言的语法基本单元包括表达式、 term 及操作符

2. 该语言可以包括多个表达式

3. 一个表达式定义为两个 term 通过一个操作符连接

4. 操作符可以是加号或减号

5. term 可以是一个整数或一个表达式

现在来分析一下 “ 2 ＋ 3 － 1 ” 这个输入

第一个匹配规则的子字符串是 “ 2 ” ，根据规则 5 ，它是一个 term ，第二个匹配的是 “ 2 ＋ 3 ” ，它

符合第 2 条规则 —— 一个操作符连接两个 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 。

解析器类型 Types

Types

Types of

of parsers

parsers

有两种基本的解析器 —— 自顶向下解析及自底向上解析。比较直观的解释是，自顶向下解析

，

查看语法的最高层结构并试着匹配其中一个；自底向上解析则从输入开始，逐步将其转换为

语法规则，从底层规则开始直到匹配高层规则。

来看一下这两种解析器如何解析上面的例子：

自顶向下解析器从最高层规则开始 —— 它先识别出 “ 2 ＋ 3 “ ，将其视为一个表达式，然后识别

出 ” 2 ＋ 3 － 1 “ 为一个表达式（识别表达式的过程中匹配了其他规则，但出发点是最高层规则）。

自底向上解析会扫描输入直到匹配了一条规则，然后用该规则取代匹配的输入，直到解析完

所有输入。部分匹配的表达式被放置在解析堆栈中。

Stack

Stack Input

Input

2 + 3 – 1

term + 3 – 1

term operation 3 – 1

expression - 1

expression operation 1

expression

自底向上解析器称为 shift reduce 解析器，因为输入向右移动（想象一个指针首先指向输入

开始处，并向右移动），并逐渐简化为语法规则。

自动化解析 Generating

Generating

Generating parse

parse

解析器生成器这个工具可以自动生成解析器，只需要指定语言的文法 —— 词汇表及语法规

则，它就可以生成一个解析器。创建一个解析器需要对解析有深入的理解，而且手动的创

建一个由较好性能的解析器并不容易，所以解析生成器很有用。 Webkit 使用两个知名的解

析生成器 —— 用于创建语法分析器的 Flex 及创建解析器的 Bison （你可能接触过 Lex 和

Yacc ）。 Flex 的输入是一个包含了符号定义的正则表达式， Bison 的输入是用 BNF 格式表示

的语法规则。 rs automatically

HTML

HTML 解析器 HTML

HTML

HTML Parser

Parser

HTML 解析器的工作是将 html 标识解析为解析树。

HTML

HTML 文法定义 The

The

The HTML

HTML

HTML grammar

grammar

grammar definition

definition

W3C 组织制定规范定义了 HTML 的词汇表和语法。

非上下文无关文法 Not

Not

Not a

a context

context

context free

free

free grammar

grammar

正如在解析简介中提到的，上下文无关文法的语法可以用类似 BNF 的格式来定义。

不幸的是，所有的传统解析方式都不适用于 html （当然我提出它们并不只是因为好玩，它

们将用来解析 css 和 js ）， html 不能简单的用解析所需的上下文无关文法来定义。

Html 有一个正式的格式定义 —— DTD （ Document Type Definition 文档类型定义） —— 但它

并不是上下文无关文法， html 更接近于 xml ，现在有很多可用的 xml 解析器， html 有个 xm l

的变体 —— xhtml ，它们间的不同在于， html 更宽容，它允许忽略一些特定标签，有时可以

省略开始或结束标签。总的来说，它是一种 soft 语法，不像 xml 呆板、固执。

显然，这个看起来很小的差异却带来了很大的不同。一方面，这是 html 流行的原因 —— 它

的宽容使 web 开发人员的工作更加轻松，但另一方面，这也使很难去写一个格式化的文法

。

所以， html 的解析并不简单，它既不能用传统的解析器解析，也不能用 xml 解析器解析。

HTML

HTML DTD

DTD

Html 适用 DTD 格式进行定义，这一格式是用于定义 SGML 家族的语言，包括了对所有允

许元素及它们的属性和层次关系的定义。正如前面提到的， html DTD 并没有生成一种上下

文无关文法。

DTD 有一些变种，标准模式只遵守规范，而其他模式则包含了对浏览器过去所使用标签的

支持，这么做是为了兼容以前内容。最新的标准 DTD 在 http://www.w3.org/TR/html4/strict.dtd

DOM

输出的树，也就是解析树，是由 DOM 元素及属性节点组成的。 DOM 是文档对象模型的缩

写，它是 html 文档的对象表示，作为 html 元素的外部接口供 js 等调用。

树的根是 “ document ” 对象。

DOM 和标签基本是一一对应的关系，例如，如下的标签：

<html>

<body>

<p>

Hello DOM

</p>

剩余32页未读，继续阅读

伊生臻爱

粉丝: 0
资源: 7

探索主流浏览器工作原理：从URI到用户界面

WEB浏览器工作原理

Web程序工作原理详解

第一章 Java Web工作原理

web开发者必读,浏览器工作原理.pdf

浏览器工作原理

浏览器工作原理 有多种浏览器

前端必读：浏览器工作原理

用VB设计自已的Web浏览器.rar_VB浏览器_WEB浏览器_vb 浏览器_web 浏览器_windows浏览器

理解Web开发技术与浏览器工作原理

服务器与Web服务器解析 - 浏览器工作原理揭秘

最新资源

浏览器工作原理有多种浏览器