浏览器工作原理新式网络浏览器幕后揭秘
序言
这是一篇全面介绍Webkit 和Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时间来研读网络浏览器的源代码。她写道：
在IE 占据90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了过半的市场份额，因此，是时候来揭开神秘的面纱，一探网络浏览器的内幕了。呃，里面只有数以百万行计的C++ 代码...
塔利在她的网站上公布了自己的研究成果，但是我们觉得它值得让更多的人来了解，所以我们在此重新整理并公布。
作为一名网络开发人员，学习浏览器的内部工作原理将有助于您作出更明智的决策，并理解那些最佳开发实践的个中缘由。尽管这是一篇相当长的文档，但是我们建议您花些时间来仔细阅读；读完之后，您肯定会觉得所费不虚。保罗·爱丽诗(Paul Irish)，Chrome 浏览器开发人员事务部
简介
网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输入https://www.wendangku.net/doc/ec4044823.html, 直到您在浏览器屏幕上看到Google 首页的整个过程中都发生了些什么。
我们要讨论的浏览器
目前使用的主流浏览器有五个：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)：
用户界面- 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
浏览器引擎- 在用户界面和呈现引擎之间传送指令。
呈现引擎- 负责显示请求的内容。如果请求的内容是HTML，它就负责解析HTML 和CSS 内容，并将解析后的内容显示在屏幕上。
网络- 用于网络调用，比如HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
用户界面后端- 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
JavaScript 解释器。用于解析和执行JavaScript 代码。
数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如Cookie。新的HTML 规范(HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
值得注意的是，和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。
呈现引擎
呈现引擎的作用嘛...当然就是“呈现”了，也就是在浏览器的屏幕上显示请求的内容。
默认情况下，呈现引擎可显示HTML 和XML 文档与图片。通过插件（或浏览器扩展程序），还可以显示其它类型的内容；例如，使用PDF 查看器插件就能显示PDF 文档。但是在本章中，我们将集中介绍其主要用途：显示使用CSS 格式化的HTML 内容和图片。
呈现引擎
本文所讨论的浏览器（Firefox、Chrome 浏览器和Safari）是基于两种呈现引擎构建的。Firefox 使用的是Gecko，这是Mozilla 公司“自制”的呈现引擎。而Safari 和Chrome 浏览器使用的都是Webkit。
Webkit 是一种开放源代码呈现引擎，起初用于Linux 平台，随后由Apple 公司进行修改，从而支持苹果机和Windows。有关详情，请参阅https://www.wendangku.net/doc/ec4044823.html,。
主流程
呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在8000 个块以内。
然后进行如下所示的基本流程：
呈现引擎将开始解析HTML 文档，并将各标记逐个转化成“内容树”上的DOM 节点。同时也会解析外部CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。
呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制- 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。
需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
主流程示例
从以上两图可以看出，虽然Webkit 和Gecko 使用的术语略有不同，但整体流程是基本相同的。
Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。Webkit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，Webkit 使用的术语是“布局”，而Gecko 称之为“重排”。对于连接DOM 节点和可视化信息从而创建呈现树的过程，Webkit 使用的术语是“附加”。有一个细微的非语义差别，就是Gecko 在HTML 与DOM 树之间还有一个称为“内容槽”的层，用于生成DOM 元素。我们会逐一论述流程中的每一部分：
解析- 综述
解析是呈现引擎中非常重要的一个环节，因此我们要更深入地讲解。首先，来介绍一下解析。
解析文档是指将文档转化成为有意义的结构，也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，它称作解析树或者语法树。
示例- 解析2 + 3 - 1 这个表达式，会返回下面的树：
语法
解析是以文档所遵循的语法规则（编写文档所用的语言或格式）为基础的。所有可以解析的格式都必须对应确定的语法（由词汇和语法规则构成）。这称为与上下文无关的语法。人类语言并不属于这样的语言，因此无法用常规的解析技术进行解析。
解析器和词法分析器的组合
解析的过程可以分成两个子过程：词法分析和语法分析。
词法分析是将输入内容分割成大量标记的过程。标记是语言中的词汇，即构成内容的单位。在人类语言中，它相当于语言字典中的单词。
语法分析是应用语言的语法规则的过程。
解析器通常将解析工作分给以下两个组件来处理：词法分析器（有时也称为标记生成器），负责将输入内容分解成一个个有效标记；而解析器负责根据语言的语法规则分析文档的结构，从而构建解析树。词法分析器知道如何将无关的字符（比如空格和换行符）分离出来。
解析是一个迭代的过程。通常，解析器会向词法分析器请求一个新标记，并尝试将其与某条语法规则进行匹配。如果发现了匹配规则，解析器会将一个对应于该标记的节点添加到解析树中，然后继续请求下一个标记。如果没有规则可以匹配，解析器就会将标记存储到内部，并继续请求标记，直至找到可与所有内部存储的标记匹配的规则。如果找不到任何匹配规则，解析器就会引发一个异常。这意味着文档无效，包含语法错误。翻译
很多时候，解析树还不是最终产品。解析通常是在翻译过程中使用的，而翻译是指将输入文档转换成另一种格式。编译就是这样一个例子。编译器可将源代码编译成机器代码，具体过程是首先将源代码解析成解析树，然后将解析树翻译成机器代码文档。
解析示例
在图 5 中，我们通过一个数学表达式建立了解析树。现在，让我们试着定义一个简单的数学语言，用来演示解析的过程。
词汇：我们用的语言可包含整数、加号和减号。
语法：
构成语言的语法单位是表达式、项和运算符。
我们用的语言可以包含任意数量的表达式。
表达式的定义是：一个“项”接一个“运算符”，然后再接一个“项”。
运算符是加号或减号。
项是一个整数或一个表达式。
让我们分析一下2 + 3 - 1。
匹配语法规则的第一个子串是2，而根据第5 条语法规则，这是一个项。匹配语法规则的第二个子串是2 + 3，而根据第3 条规则（一个项接一个运算符，然后再接一个项），这是一个表达式。下一个匹配项已经到了输入的结束。2 + 3 - 1 是一个表达式，因为我们已经知道 2 + 3 是一个项，这样就符合“一个项接一个运算符，然后再接一个项”的规则。2 + + 不与任何规则匹配，因此是无效的输入。
词汇和语法的正式定义
词汇通常用正则表达式表示。
例如，我们的示例语言可以定义如下：
INTEGER :0|[1-9][0-9]*
PLUS : +
MINUS: -
正如您所看到的，这里用正则表达式给出了整数的定义。
语法通常使用一种称为BNF 的格式来定义。我们的示例语言可以定义如下：
expression := term operation term
operation := PLUS | MINUS
term := INTEGER | expression
之前我们说过，如果语言的语法是与上下文无关的语法，就可以由常规解析器进行解析。与上下文无关的语法的直观定义就是可以完全用BNF 格式表达的语法。有关正式定义，请参阅关于与上下文无关的语法的维基百科文章。
解析器类型
有两种基本类型的解析器：自上而下解析器和自下而上解析器。直观地来说，自上而下的解析器从语法的高层结构出发，尝试从中找到匹配的结构。而自下而上的解析器从低层规则出发，将输入内容逐步转化为语法规则，直至满足高层规则。
让我们来看看这两种解析器会如何解析我们的示例：
自上而下的解析器会从高层的规则开始：首先将 2 + 3 标识为一个表达式，然后将 2 + 3 - 1 标识为一个表达式（标识表达式的过程涉及到匹配其他规则，但是起点是最高级别的规则）。
自下而上的解析器将扫描输入内容，找到匹配的规则后，将匹配的输入内容替换成规则。如此继续替换，直到输入内容的结尾。部分匹配的表达式保存在解析器的堆栈中。
堆栈输入
2 +
3 - 1
项+ 3 - 1
项运算 3 - 1
表达式- 1
表达式运算符 1
表达式
这种自下而上的解析器称为移位归约解析器，因为输入在向右移位（设想有一个指针从输入内容的开头移动到结尾），并且逐渐归约到语法规则上。
自动生成解析器
有一些工具可以帮助您生成解析器，它们称为解析器生成器。您只要向其提供您所用语言的语法（词汇和语法规则），它就会生成相应的解析器。创建解析器需要对解析有深刻理解，而人工创建优化的解析器并不是一件容易的事情，所以解析器生成器是非常实用的。
Webkit 使用了两种非常有名的解析器生成器：用于创建词法分析器的Flex 以及用于创建解析器的Bison（您也可能遇到Lex 和Yacc 这样的别名）。Flex 的输入是包含标记的正则表达式定义的文件。Bison 的输入是采用BNF 格式的语言语法规则。
HTML 解析器
HTML 解析器的任务是将HTML 标记解析成解析树。
HTML 语法定义
HTML 的词汇和语法在W3C 组织创建的规范中进行了定义。当前的版本是HTML4，HTML5 正在处理过程中。
非与上下文无关的语法
正如我们在解析过程的简介中已经了解到的，语法可以用BNF 等格式进行正式定义。
很遗憾，所有的常规解析器都不适用于HTML（我并不是开玩笑，它们可以用于解析CSS 和JavaScript）。HTML 并不能很容易地用解析器所需的与上下文无关的语法来定义。
有一种可以定义HTML 的正规格式：DTD（Document Type Definition，文档类型定义），但它不是与上下文无关的语法。
这初看起来很奇怪：HTML 和XML 非常相似。有很多XML 解析器可以使用。HTML 存在一个XML 变体(XHTML)，那么有什么大的区别呢？
区别在于HTML 的处理更为“宽容”，它允许您省略某些隐式添加的标记，有时还能省略一些起始或者结束标记等等。和XML 严格的语法不同，HTML 整体来看是一种“软性”的语法。
显然，这种看上去细微的差别实际上却带来了巨大的影响。一方面，这是HTML 如此流行的原因：它能包容您的错误，简化网络开发。另一方面，这使得它很难编写正式的语法。概括地说，HTML 无法很容易地通过常规解析器解析（因为它的语法不是与上下文无关的语法），也无法通过XML 解析器来解析。
HTML DTD
HTML 的定义采用了DTD 格式。此格式可用于定义SGML 族的语言。它包括所有允许使用的元素及其属性和层次结构的定义。如上文所述，HTML DTD 无法构成与上下文无关的语法。
DTD 存在一些变体。严格模式完全遵守HTML 规范，而其他模式可支持以前的浏览器所使用的标记。这样做的目的是确保向下兼容一些早期版本的内容。最新的严格模式DTD 可以在这里找到：
DOM
解析器的输出“解析树”是由DOM 元素和属性节点构成的树结构。DOM 是文档对象模型(Document Object Model) 的缩写。它是HTML 文档的对象表示，同时也是外部内容（例如JavaScript）与HTML 元素之间的接口。解析树的根节点是“Document”对象。
DOM 与标记之间几乎是一一对应的关系。比如下面这段标记：
Hello World
可翻译成如下的DOM 树：
和HTML 一样，DOM 也是由W3C 组织指定的。请参见。这是关于文档操作的通用规范。其中一个特定模块描述针对HTML 的元素。HTML 的定义可以在这里找到：。
我所说的树包含DOM 节点，指的是树是由实现了某个DOM 接口的元素构成的。浏览器所用的具体实现也会具有一些其他属性，供浏览器在内部使用。
解析算法
我们在之前章节已经说过，HTML 无法用常规的自上而下或自下而上的解析器进行解析。
原因在于：
语言的宽容本质。
浏览器历来对一些常见的无效HTML 用法采取包容态度。
解析过程需要不断地反复。源内容在解析过程中通常不会改变，但是在HTML 中，脚本标记如果包含document.write，就会添加额外的标记，这样解析过程实际上就更改了输入内容。
由于不能使用常规的解析技术，浏览器就创建了自定义的解析器来解析HTML。
HTML5 规范详细地描述了解析算法。此算法由两个阶段组成：标记化和树构建。
标记化是词法分析过程，将输入内容解析成多个标记。HTML 标记包括起始标记、结束标记、属性名称和属性值。
标记生成器识别标记，传递给树构造器，然后接受下一个字符以识别下一个标记；如此反复直到输入的结束。
标记化算法
该算法的输出结果是HTML 标记。该算法使用状态机来表示。每一个状态接收来自输入信息流的一个或多个字符，并根据这些字符更新下一个状态。当前的标记化状态和树结构状态会影响进入下一状态的决定。这意味着，即使接收的字符相同，对于下一个正确的状态也会产生不同的结果，具体取决于当前的状态。该算法相当复杂，无法在此详述，所以我们通过一个简单的示例来帮助大家理解其原理。
基本示例- 将下面的HTML 代码标记化：
Hello world
初始状态是数据状态。遇到字符字符。在此期间接收的每个字符都会附加到新的标记名称上。在本例中，我们创建的标记是html 标记。
遇到> 标记时，会发送当前的标记，状态改回“数据状态”。标记也会进行同样的处理。目前html 和body 标记均已发出。现在我们回到“数据状态”。接收到Hello world 中的H 字符时，将创建并发送字符标记，直到接收中的。然后将发送新的标记，并回到“数据状态”。输入也会进行同样的处理。
树构建算法
在创建解析器的同时，也会创建Document 对象。在树构建阶段，以Document 为根节点的DOM 树也会不断进行修改，向其中添加各种元素。标记生成器发送的每个节点都会由树构建器进行处理。规范中定义了每个标记所对应的DOM 元素，这些元素会在接收到相应的标记时创建。这些元素不仅会添加到DOM 树中，还会添加到开放元素的堆栈中。此堆栈用于纠正嵌套错误和处理未关闭的标记。其算法也可以用状态机来描述。这些状态称为“插入模式”。
让我们来看看示例输入的树构建过程：
Hello world
树构建阶段的输入是一个来自标记化阶段的标记序列。第一个模式是“initial mode”。接收HTML 标记后转为“before html”模式，并在这个模式下重新处理此标记。这样会创建一个HTMLHtmlElement 元素，并将其附加到Document 根对象上。
然后状态将改为“before head”。此时我们接收“body”标记。即使我们的示例中没有“head”标记，系统也会隐式创建一个HTMLHeadElement，并将其添加到树中。
现在我们进入了“in head”模式，然后转入“after head”模式。系统对body 标记进行重新处理，创建并插入HTMLBodyElement，同时模式转变为“body”。
现在，接收由“Hello world”字符串生成的一系列字符标记。接收第一个字符时会创建并插入“Text”节点，而其他字符也将附加到该节点。
接收body 结束标记会触发“after body”模式。现在我们将接收HTML 结束标记，然后进入“after after body”模式。接收到文件结束标记后，解析过程就此结束。
解析结束后的操作
在此阶段，浏览器会将文档标注为交互状态，并开始解析那些处于“deferred”模式的脚本，也就是那些应在文档解析完成后才执行的脚本。然后，文档状态将设置为“完成”，一个“加载”事件将随之触发。
您可以在HTML5 规范中查看标记化和树构建的完整算法
浏览器的容错机制
您在浏览HTML 网页时从来不会看到“语法无效”的错误。这是因为浏览器会纠正任何无效内容，然后继续工作。
以下面的HTML 代码为例：
Really lousy HTML
在这里，我已经违反了很多语法规则（“mytag”不是标准的标记，“p”和“div”元素之间的嵌套有误等等），但是浏览器仍然会正确地显示这些内容，并且毫无怨言。因为有大量的解析器代码会纠正HTML 网页作者的错误。
不同浏览器的错误处理机制相当一致，但令人称奇的是，这种机制并不是HTML 当前规范的一部分。和书签管理以及前进/后退按钮一样，它也是浏览器在多年发展中的产物。很多网站都普遍存在着一些已知的无效HTML 结构，每一种浏览器都会尝试通过和其他浏览器一样的方式来修复这些无效结构。
HTML5 规范定义了一部分这样的要求。Webkit 在HTML 解析器类的开头注释中对此做了很好的概括。
解析器对标记化输入内容进行解析，以构建文档树。如果文档的格式正确，就直接进行解析。
遗憾的是，我们不得不处理很多格式错误的HTML 文档，所以解析器必须具备一定的容错性。
我们至少要能够处理以下错误情况：
明显不能在某些外部标记中添加的元素。在此情况下，我们应该关闭所有标记，直到出现禁止添加的元素，然后再加入该元素。
我们不能直接添加的元素。这很可能是网页作者忘记添加了其中的一些标记（或者其中的标记是可选的）。这些标签可能包括：HTML HEAD BODY TBODY TR TD LI（还有遗漏的吗？）。
向inline 元素内添加block 元素。关闭所有inline 元素，直到出现下一个较高级的block 元素。
如果这样仍然无效，可关闭所有元素，直到可以添加元素为止，或者忽略该标记。
让我们看一些Webkit 容错的示例：
使用了而不是
有些网站使用了而不是。为了与IE 和Firefox 兼容，Webkit 将其与做同样的处理。
代码如下：
if (t->isCloseTag(brTag) && m_document->inCompatMode()) {
reportError(MalformedBRError);
t->beginTag = true;
}
请注意，错误处理是在内部进行的，用户并不会看到这个过程。
离散表格
离散表格是指位于其他表格内容中，但又不在任何一个单元格内的表格。
比如以下的示例：
| inner table |
Webkit 会将其层次结构更改为两个同级表格：
| outer table |
| inner table |
代码如下：
if (m_inStrayTableContent && localName == tableTag)
popBlock(tableTag);
Webkit 使用一个堆栈来保存当前的元素内容，它会从外部表格的堆栈中弹出内部表格。现在，这两个表格就变成了同级关系。
嵌套的表单元素
如果用户在一个表单元素中又放入了另一个表单，那么第二个表单将被忽略。
代码如下：
if (!m_currentFormElement) {
m_currentFormElement = new HTMLFormElement(formTag, m_document);
}
过于复杂的标记层次结构
代码的注释已经说得很清楚了。
示例网站嵌套了约1500 个标记，全都来自一堆标记。我们只允许最多20 层同类型标记的嵌套，如果再嵌套更多，就会全部忽略。
bool HTMLParser::allowNestedRedundantTag(const AtomicString& tagName)
{
unsigned i = 0;
for (HTMLStackElem* curr = m_blockStack;
i tagName == tagName;
curr = curr->next, i++) { }
return i != cMaxRedundantTagDepth;
}
放错位置的html 或者body 结束标记
同样，代码的注释已经说得很清楚了。
支持格式非常糟糕的HTML 代码。我们从不关闭body 标记，因为一些愚蠢的网页会在实际文档结束之前就关闭。我们通过调用end() 来执行关闭操作。
if (t->tagName == htmlTag || t->tagName == bodyTag )
return;
所以网页作者需要注意，除非您想作为反面教材出现在Webkit 容错代码段的示例中，否则还请编写格式正确的HTML 代码。
CSS 解析
还记得简介中解析的概念吗？和HTML 不同，CSS 是上下文无关的语法，可以使用简介中描述的各种解析器进行解析。事实上，CSS 规范定义了CSS 的词法和语法。
让我们来看一些示例：词法语法（词汇）是针对各个标记用正则表达式定义的：
comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num [0-9]+|[0-9]*"."[0-9]+
nonascii [\200-\377]
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
name {nmchar}+
ident {nmstart}{nmchar}*
“ident”是标识符(identifier) 的缩写，比如类名。“name”是元素的ID（通过“#”来引用）。
语法是采用BNF 格式描述的。
ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
selector
: simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
;
simple_selector
: element_name [ HASH | class | attrib | pseudo ]*
| [ HASH | class | attrib | pseudo ]+
;
class
: '.' IDENT
;
element_name
: IDENT | '*'
;
attrib
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
[ IDENT | STRING ] S* ] ']'
;
pseudo
: ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
;
解释：这是一个规则集的结构：
div.error , a.error {
color:red;
font-weight:bold;
}
div.error 和a.error 是选择器。大括号内的部分包含了由此规则集应用的规则。此结构的正式定义是这样的：ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
这表示一个规则集就是一个选择器，或者由逗号和空格（S 表示空格）分隔的多个（数量可选）选择器。规则集包含了大括号，以及其中的一个或多个（数量可选）由分号分隔的声明。“声明”和“选择器”将由下面的BNF 格式定义。
Webkit CSS 解析器
Webkit 使用Flex 和Bison 解析器生成器，通过CSS 语法文件自动创建解析器。正如我们之前在解析器简介中所说，Bison 会创建自下而上的移位归约解析器。Firefox 使用的是人工编写的自上而下的解析器。这两种解析器都会将CSS 文件解析成StyleSheet 对象，且每个对象都包含CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其他与CSS 语法对应的对象。
处理脚本和样式表的顺序
脚本
网络的模型是同步的。网页作者希望解析器遇到标记时立即解析并执行脚本。文档的解析将停止，直到脚本执行完毕。如果脚本是外部的，那么解析过程会停止，直到从网络同步抓取资源完成后再继续。此模型已经使用了多年，也在HTML4 和HTML5 规范中进行了指定。作者也可以将脚本标注为“defer”，这样它就不会停止文档解析，而是等到解析结束才执行。HTML5 增加了一个选项，可将脚本标记为异步，以便由其他线程解析和执行。
预解析
Webkit 和Firefox 都进行了这项优化。在执行脚本时，其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载，从而提高总体速度。请注意，预解析器不会修改DOM 树，而是将这项工作交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。
样式表
另一方面，样式表有着不同的模型。理论上来说，应用样式表不会更改DOM 树，因此似乎没有必要等待样式表并停止文档解析。但这涉及到一个问题，就是脚本在文档解析阶段会请求样式信息。如果当时还没有加载和解析样式，脚本就会获得错误的回复，这样显然会产生很多问题。这看上去是一个非典型案例，但事实上非常普遍。Firefox 在样式表加载和解析的过程中，会禁止所有脚本。而对于Webkit 而言，仅当脚本尝试访问的样式属性可能受尚未加载的样式表影响时，它才会禁止该脚本。
呈现树构建
在DOM 树构建的同时，浏览器还会构建另一个树结构：呈现树。这是由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。
Firefox 将呈现树中的元素称为“框架”。Webkit 使用的术语是呈现器或呈现对象。呈现器知道如何布局并将自身及其子元素绘制出来。Webkits RenderObject 类是所有呈现器的基类，其定义如下：
class RenderObject{
virtual void layout();
virtual void paint(PaintInfo);
virtual void rect repaintRect();
Node* node; //the DOM node
RenderStyle* style; // the computed style
RenderLayer* containgLayer; //the containing z-index layer
}
每一个呈现器都代表了一个矩形的区域，通常对应于相关节点的CSS 框，这一点在CSS2 规范中有所描述。它包含诸如宽度、高度和位置等几何信息。框的类型会受到与节点相关的“display”样式属性的影响（请参阅样式计算章节）。下面这段Webkit 代码描述了根据display 属性的不同，针对同一个DOM 节点应创建什么
浏览器工作原理
从输入网址到显示页面：浏览器工作原理拆解分析本文将深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～ 1. 首先嘛，你得在浏览器里输入网址: 2. 浏览器查找域名的IP地址 导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下： 1.浏览器缓存–浏览器会缓存DNS记录一段时间。有趣的是，操作系统没有告诉 浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。 2.系统缓存–如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调 用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。 3.路由器缓存–接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。 4.ISP DNS 缓存–接下来要check的就是ISP缓存DNS的服务器。在这一般都能 找到相应的缓存记录。 5.递归搜索–你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com 顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.co m域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。 DNS递归查找如下图所示：
DNS有一点令人担忧，这就是像https://www.wendangku.net/doc/ec4044823.html, 或者https://www.wendangku.net/doc/ec4044823.html,这样的整个域名看上去只是对应一个单独的IP地址。还好，有几种方法可以消除这个瓶颈：1. 循环DNS 是DNS查找时返回多个IP时的解决方案。举例来说，Faceboo https://www.wendangku.net/doc/ec4044823.html,实际上就对应了四个IP地址。 2. 负载平衡器是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能负载平衡器。 3. 地理DNS 根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。 4. Anycast是一个IP地址映射多个物理主机的路由技术。美中不足，Anycast 与TCP协议适应的不是很好，所以很少应用在那些方案中。 大多数DNS服务器使用Anycast来获得高效低延迟的DNS查找。 3. 浏览器给web服务器发送一个HTTP请求 因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从中读取。 所以，浏览器将把一下请求发送到Facebook所在的服务器： GET https://www.wendangku.net/doc/ec4044823.html,/ HTTP/1.1 Accept: application/x-ms-application, image/jpeg, application/xaml+x ml, [...] User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...] Accept-Encoding: gzip, deflate Connection: Keep-Alive Host: https://www.wendangku.net/doc/ec4044823.html, Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=210 1[...] GET 这个请求定义了要读取的URL：“https://www.wendangku.net/doc/ec4044823.html,/”。浏览器自身定义(User-Agent头)，和它希望接受什么类型的相应(Accept and Accept-Encodin g头). Connection头要求服务器为了后边的请求不要关闭TCP连接。 请求中也包含浏览器存储的该域名的cookies。可能你已经知道，在不同页面请求当中，cookies是与跟踪一个网站状态相匹配的键值。这样cookies会存储登录用户名，服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里，每次请求时发送给服务器。 用来看原始HTTP请求及其相应的工具很多。作者比较喜欢使用fiddler，当然也有像FireBug这样其他的工具。这些软件在网站优化时会帮上很大忙。
浏览器内部工作原理
浏览器内部工作原理 浏览器可以被认为是使用最广泛的软件，我将介绍浏览器的简单基本的工作原理，我们将看到，从你在地址栏输入https://www.wendangku.net/doc/ec4044823.html,到你看到facebook主页过程中都发生了什么。
URL解析过程 ? 1. You enter a URL into the browser（输入一个url地址） –https://www.wendangku.net/doc/ec4044823.html, ? 2.The browser looks up the IP address for the domain name（浏览器查找域名的ip地址） –浏览器缓存 –系统缓存 –路由器缓存 –ISP DNS缓存 –递归搜索
? 3.The browser sends a HTTP request to the web server(浏览器给web服务器发送一个HTTP请求) –GET https://www.wendangku.net/doc/ec4044823.html,/ HTTP/1.1 –Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...] –User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...] –Accept-Encoding: gzip, deflate –Connection: Keep-Alive –Host: https://www.wendangku.net/doc/ec4044823.html, –Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...] ?Get : 以GET的方式提交发送请求| POST ?https://www.wendangku.net/doc/ec4044823.html,/ 发送请求的URL地址 ?Http/1.1 HTTP协议 ?User-Agent : 浏览器自身定义 ?Accept-Encoding : 希望接收什么类型相应数据 ?Connection : 表示要求服务器为了后边的请求不要关闭TCP连接 ?请求中也包含浏览器存储的该域名的cookies，cookies会存储登录用户名，服务器分配的密码和一些用户设置等?像“https://www.wendangku.net/doc/ec4044823.html,/”中的斜杠是至关重要的。这种情况下，浏览器能安全的添加斜杠。而像“http: //https://www.wendangku.net/doc/ec4044823.html,/folderOrFile”这样的地址，因为浏览器不清楚folderOrFile到底是文件夹还是文件，所以不能自动添加斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，结果造成一次不必要的握手
各服务器工作原理
FTP(文件传输协议)服务器工作原理FTP(文件传输协议)工作原理 目前在网络上,如果你想把文件和其他人共享。最方便的办法莫过于将文件放FTP服务器上，然后其他人通过FTP客户端程序来下载所需要的文件。 1、FTP架构 如同其他的很多通讯协议，FTP通讯协议也采用客户机 / 服务器（Client / Server ）架构。用户可以通过各种不同的FTP客户端程序，借助FTP协议，来连接FTP服务器，以上传或者下载文件。 2、FTP通讯端口知识 FTP服务器和客户端要进行文件传输，就需要通过端口来进行。FTP协议需要的端口一般包括两种：控制链路--------TCP端口21所有你发往FTP服务器的命令和服务器反馈的指令都是通过服务器上的21 端口传送的。数据链路--------TCP端口20数据链路主要是用来传送数据的，比如客户端上传、下载内容，以及列目录显示的内容等。 3、FTP连接的两种方式在数据链路的建立上，FTP Server 为了适应不同的网络环境，支持两种连接模式：主动模式（Port）和被动模式（Pasv)。其实这两种连接模式主要是针对数据链路进行的，和控制链路无关。 主动模式主动模式是这样工作的：客户端把自己的高位端口和服务器端口21建立控制链路。所有的控制命令比如Is或get都是通过这条链路传送的。当客户端需要服务器端给它传送数据时，客户端会发消息给服务器端，告诉自己的位置和打开的高位端口（一般大于1024的端口都就叫高位端口），等候服务器的20端口和客户端打开的端口进行连接，从而进行数据的传输。当服务器端收到信息后，就会和客户端打开的端口连接，这样数据链路就建立起来了。
浏览器工作原理拆解分析
浏览器工作原理拆解分析 1. 首先嘛，你得在浏览器里输入网址: 2. 浏览器查找域名的IP地址 导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下： 浏览器缓存——浏览器会缓存DNS记录一段时间。有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。 系统缓存——如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows 里是gethostbyname）。这样便可获得系统缓存中的记录。 路由器缓存——接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。 ISP DNS缓存——接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。 递归搜索——你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。 DNS递归查找如下图所示： DNS有一点令人担忧，这就是像https://www.wendangku.net/doc/ec4044823.html, 或者 https://www.wendangku.net/doc/ec4044823.html,这样的整个域名看上去只是对应一个单独的IP地址。还好，有几种方法可以消除这个瓶颈： 循环 DNS是DNS查找时返回多个IP时的解决方案。举例来说，https://www.wendangku.net/doc/ec4044823.html,实际上就对应了四个IP地址。 负载平衡器是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能负载平衡器。 地理 DNS 根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。
浏览器工作原理(图) 内部工作原理
前端必读：浏览器内部工作原理 目录 一、介绍 二、渲染引擎 三、解析与DOM树构建 四、渲染树构建 五、布局 六、绘制 七、动态变化 八、渲染引擎的线程 九、CSS2可视模型 英文原文：How Browsers Work: Behind the Scenes of Modern Web Browsers 一、介绍 浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入https://www.wendangku.net/doc/ec4044823.html,到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。 本文将基于一些开源浏览器的例子——Firefox、Chrome及Safari，Safari是部分开源的。 根据W3C（World Wide Web Consortium万维网联盟）的浏览器统计数据，当前（2011年5月），Firefox、Safari及Chrome的市场占有率综合已接近60％。（原文为2009年10月，数据没有太大变化）因此，可以说开源浏览器已经占据了浏览器市场的半壁江山。 浏览器的主要功能 浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，在网络一章有更多讨论。 HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。 HTML规范的最新版本是HTML4(https://www.wendangku.net/doc/ec4044823.html,/TR/html401/)，HTML5还在制定中（译注：两年前），最新的CSS规范版本是2（https://www.wendangku.net/doc/ec4044823.html,/TR/CSS2），CSS3也还正在制定中（译注：同样两年前）。 这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web开发者带来了严重的兼容性问题。 但是，浏览器的用户界面则差不多，常见的用户界面元素包括： ?用来输入URI的地址栏 ?前进、后退按钮 ?书签选项 ?用于刷新及暂停当前加载文档的刷新、暂停按钮
WEB浏览器工作原理
WEB浏览器工作原理【来自网络】 2007-04-13 17:15 WWW 的工作基于客户机/服务器计算模型，由Web 浏览器(客户机)和Web服务器(服务 器)构成，两者之间采用超文本传送协议（HTTP）进行通信， HTTP协议的作用原理包括四 个步骤：连接，请求，应答。根据上述HTTP协议的作用原理，本文实现了GET 请求的Web服 务器程序的方法，通过创建 TcpListener类对象，监听端口8080；等待、接受客户机连 接到端口8080；创建与socket字相关联的输入流和输出流;然后，读取客户机的请求信 息，若请求类型是GET，则从请求信息中获取所访问的HTML文件名，如果HTML 文件存在， 则打开HTML文件，把HTTP头信息和 HTML文件内容通过socket传回给Web浏览器，然后关闭 文件。否则发送错误信息给Web浏览器。最后，关闭与相应Web浏览器连接的socket 字。 一、HTTP协议的作用原理 WWW是以Internet作为传输媒介的一个应用系统，WWW网上最基本的传输单位是Web网 页。WWW的工作基于客户机/服务器计算模型，由Web 浏览器(客户机)和Web服务器(服务 器)构成，两者之间采用超文本传送协议（HTTP）进行通信。HTTP协议是基于TCP/IP协议 之上的协议，是Web浏览器和Web服务器之间的应用层协议，是通用的、无状态的、面向对 象的协议。HTTP协议的作用原理包括四个步骤： 连接：Web浏览器与Web服务器建立连接，打开一个称为socket（套接字）的虚拟文 件，此文件的建立标志着连接建立成功。 请求：Web浏览器通过socket向Web服务器提交请求。HTTP的请求一般是GET 或POST命 令（POST用于FORM参数的传递）。GET命令的格式为： GET 路径/文件名 HTTP/1.0 文件名指出所访问的文件，HTTP/1.0指出Web浏览器使用的HTTP版本。 应答：Web浏览器提交请求后，通过HTTP协议传送给Web服务器。Web服务器接
深入了解浏览器加载渲染及内核原理
浏览器加载和渲染网页的过程 2009-07-20 20:26 关于网页加载和渲染的过程，在网络上的讨论并不多。可能是因为这个过程比较复杂，而且浏览器执行的速度太快，目前还没有发现什么比较好的工具可以清楚的看到浏览器解析网页的每一个过程。通过firedug和httpWatch可以看到浏览器的http请求，但是对于浏览器如何paint和flow处理html元素，我们仍然是不得而知。“flow”这个词借鉴于reflow，表示浏览器第一次加载网页的过程。在网络上搜索了一下，学习如下。 关于浏览器加载网页过程的有趣视频 可以参见：https://www.wendangku.net/doc/ec4044823.html,/blog/2008/05/reflow/（形象化的reflow）。这个视频展现了网页加载的过程，看着比较有趣。要是可以更加形象化，就更好了，可以帮助我们书写更好的提高网页加载速度的代码。 浏览器内核 不同的浏览器内核，对于网页的解析过程肯定也不尽相同。 https://www.wendangku.net/doc/ec4044823.html,/post/Trident-Gecko-WebKit-Presto.php一文对各种浏览器的页面渲染引擎进行了简介。目前主要有基于 （1）Trident页面渲染引擎–> IE系列浏览器； （2）Gecko页面渲染引擎–> Mozilla Firefox； （3）KHTML页面渲染引擎或WebKit框架–> Safafi和Google Chrome； （4）Presto页面渲染引擎–> Opera 详细的介绍可以参见原文。 浏览器解析网页的过程 https://www.wendangku.net/doc/ec4044823.html,/seosky/blog/item/78d3394c130f86ffd72afc56.html浏览器加载 和渲染原理分析一文中通过一定的方法，推断了浏览器加载解析网页的顺序大致如下： 1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的； 2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）； 3. 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载，并且在下载后进行解析，解析（JS、CSS中如有重定义，后定义函数将覆盖前定义函数）过程中，停止页面所有往下元素的下载； 4. 样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样
java web 工作原理总结
总结 第一章java web 工作原理 1.1、web应用程序有web服务器，web客服端浏览器，HTTP协议以及静态HTML文件。 Web服务器的作用是接受客服端请求，然后向客服端返回些结果；浏览器的作用是允许用户请求服务器上的某个资源，并且向用户显示请求的结果； HTML是用于告诉浏览器怎么样向用户显示内容； HTTP是web上客服端和服务器之间通信所用的协议。 1.1.2 HTTP协议将来自于客服端的请求信息封装成HTTP请求； 封装的信息当中包括请求行、请求头、消息体、分隔请求头、消息体的一个空行。 请求行是一个ASCII文本行，由三个标记组成：请求的HTTP方法、请求的URL、HTTP版本；中间用空格分开例如： GET /lovobook/index.html HTTP/1.0 在HTTP1.1版本中请求方法有八种分别是下面： GET：用于向服务器检索资源在HTTP请求头 POST：用于向服务器发送资源，并要求指定的URI处理在消息体HEAD：于GET方法相同，服务器只返回状态行和头标，并不返回请求文档。 PUT：请求服务器保持请求数据作为指定的URI新内容；
DELETE：请求服务器删除URI中命名的资源； OPTIONS：请求关于服务器支持的请求方法信息； TRACE：请求web服务器反馈HTTP请求和其头标；CONNECT：已文档化但当前未实现的一个方法，预留做隧道处理；请求头： HTTP协议使用HTTP头来传递请求的元信息。HTTP头是一个用冒号分隔的名称/值对，冒号前面是HTTP头的名称，后面是HTTP头的值。 1.1.3 HTTP响应包括：状态行、响应头、消息体、分割消息头、响应头。状态行里面出现： 1XX:表示信息，请求收到，继续处理。 2XX:表示成功 3XX:表示重定向 4XX:表示客服端错误 5XX:表示服务器错误 1.2 Web服务器的缺陷是只能向用户提供静态网页内容。 1.3 服务器端网页编程就是web服务器创建动态服务器端内容的过程。 1.3.1 服务器端网页编程出现得最早的技术就是CGI，它的缺点就是每次请求一个CGI资源，将在服务器上创建一个新的进程，并且通过标准输
Web服务器的工作原理
Web服务器工作原理概述 很多时候我们都想知道，web容器或web服务器（比如Tomcat或者jboss）是怎样工作的？它们是怎样处理来自全世界的http请求的？它们在幕后做了什么动作？Java Servlet API（例如ServletContext，ServletRequest，ServletResponse和Session这些类）在其中扮演了什么角色？这些都是web应用开发者或者想成为web应用开发者的人必须要知道的重要问题或概念。在这篇文章里，我将会尽量给出以上某些问题的答案。 请集中精神！ 文章章节： ?什么是web服务器、应用服务器和web容器？ ?什么是Servlet？他们有什么作用？ ?什么是ServletContext？它由谁创建？ ?ServletRequest和ServletResponse从哪里进入生命周期？ ?如何管理Session？知道cookie吗？ ?如何确保线程安全？ 什么是web服务器，应用服务器和web容器？ 我先讨论web服务器和应用服务器。让我在用一句话大概讲讲： “在过去它们是有区别的，但是这两个不同的分类慢慢地合并了，而如今在大多在情况下和使用中可以把它们看成一个整体。” 在Mosaic浏览器（通常被认为是第一个图形化的web浏览器）和超链接内容的初期，演变出了“web服务器”的新概念，它通过HTTP协议来提供静态页面内容和图片服务。在
那个时候，大多数内容都是静态的，并且HTTP 1.0只是一种传送文件的方式。但在不久后web服务器提供了CGI功能。这意味着我们可以为每个web请求启动一个进程来产生动态内容。现在，HTTP协议已经很成熟了并且web服务器变得更加复杂，拥有了像缓存、安全和session管理这些附加功能。随着技术的进一步成熟，我们从Kiva和NetDynamics学会了公司专属的基于Java的服务器端技术。这些技术最终全都融入到我们今天依然在大多数应用开发里使用的JSP中。 以上是关于web服务器的。现在我们来讨论应用服务器。 在同一时期，应用服务器已经存在并发展很长一段时间了。一些公司为Unix开发了Tuxedo（面向事务的中间件）、TopEnd、Encina等产品，这些产品都是从类似IMS和CICS的主机应用管理和监控环境衍生而来的。大部分的这些产品都指定了“封闭的”产品专用通信协议来互连胖客户机(“fat”client)和服务器。在90年代，这些传统的应用服
浏览器工作原理
长沙理工大学 《网络系统》课程设计报告 学院城南学院专业计算机科学与技术班级计算机1101 学号201186250222 学生姓名高扬指导教师周书仁 课程成绩完成日期2013年6月28日
课程设计成绩评定 学院城南学院专业计算机科学与技术班级计算机1101 学号201186250222 学生姓名高扬指导教师周书仁完成日期2013年6月28日 指导教师对学生在课程设计中的评价 指导教师对课程设计的评定意见
课程设计任务书 城南学院学院计算机科学与技术专业
浏览器的设计与实现 学生姓名：高扬指导老师：周书仁 摘要论文主要介绍了本课题的开发背景，所要完成的功能和开发的过程。重点说明了系统设计重点、设计思想、难点技术和解决方案；同时也论述了基于HTTP协议的Web浏览器的开发思路、开发过程、利用的主要技术及本浏览器应用程序的功能模块的说明。本课题是在深入理解HTTP协议的工作机理，系统掌握了TCP/UDP网络通信协议及网络编程的基本方法，掌握了使用Windows Sockets API和MFC Socket编程技术之后，采用Visual C++作为开发工具来设计并实现一个Web浏览器，其功能主要包括：浏览器的界面实现;实现收藏菜单;显示超文本;删除相关历史记录;将应用程序加入到时工具栏、禁止弹出窗口、禁止浏览某些网站访问Web页，保存网页，打印网页，停止当前访问，刷新网页，查看源文件和Internet属性等等。 关键词：Visual C++；MFC；HTTP协议；浏览器 目录 第1章绪论 1.1 软件开发背景 随着社会的发展和需求，在20世纪中叶人类研制了电子计算机。电子计算机运算速度快，计算精度高，存储能力强，具有逻辑判断能力，具有自动运行能力等特点。进过半个多世纪的飞速发展，电子计算在许多领域得到了广泛的应用，已成为衡量一个国家现代化水平的重要标志。而
Brower基本原理
浏览器（browser） 定义： 万维网(Web)服务的客户端浏览程序。 可向万维网(Web)服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。 浏览器工作原理 WWW 的工作基于客户机/服务器计算模型，由Web 浏览器(客户机)和Web服务器(服务器)构成，两者之间采用超文本传送协议（HTTP）进行通信，HTTP协议的作用原理包括四个步骤：连接，请求，应答。根据上述HTTP协议的作用原理，本文实现了GET请求的Web服务器程序的方法，通过创建TcpListener 类对象，监听端口8080；等待、接受客户机连接到端口8080；创建与socket字相关联的输入流和输出流;然后，读取客户机的请求信息，若请求类型是GET，则从请求信息中获取所访问的HTML文件名，如果HTML文件存在，则打开HTML文件，把HTTP头信息和HTML文件内容通过socket传回给Web浏览器，然后关闭文件。否则发送错误信息给Web浏览器。最后，关闭与相应Web浏览器连接的socket 字。 HTTP协议的作用原理 WWW是以Internet作为传输媒介的一个应用系统，WWW网上最基本的传输单位是Web网页。WWW 的工作基于客户机/服务器计算模型，由Web 浏览器(客户机)和Web服务器(服务器)构成，两者之间采用超文本传送协议（HTTP）进行通信。HTTP协议是基于TCP/IP协议之上的协议，是Web浏览器和Web 服务器之间的应用层协议，是通用的、无状态的、面向对象的协议。HTTP协议的作用原理包括四个步骤：连接：Web浏览器与Web服务器建立连接，打开一个称为socket（套接字）的虚拟文件，此文件的建立标志着连接建立成功。 请求：Web浏览器通过socket向Web服务器提交请求。HTTP的请求一般是GET或POST命令（POST 用于FORM参数的传递）。GET命令的格式为： GET 路径/文件名HTTP/1.0 文件名指出所访问的文件，HTTP/1.0指出Web浏览器使用的HTTP版本。 应答：Web浏览器提交请求后，通过HTTP协议传送给Web服务器。Web服务器接到后，进行事务处理，处理结果又通过HTTP传回给Web浏览器，从而在Web浏览器上显示出所请求的页面。 例：假设客户机与https://www.wendangku.net/doc/ec4044823.html,:8080/mydir/index.html建立了连接，就会发送GET命令：GET /mydir/index.html HTTP/1.0。主机名为https://www.wendangku.net/doc/ec4044823.html,的Web服务器从它的文档空间中搜索子目录mydir的文件index.html。如果找到该文件，Web服务器把该文件内容传送给相应的Web浏览器。 为了告知Web浏览器传送内容的类型，Web服务器首先传送一些HTTP头信息，然后传送具体内容（即HTTP体信息），HTTP头信息和HTTP体信息之间用一个空行分开。 常用的HTTP头信息有： ①HTTP 1.0 200 OK 这是Web服务器应答的第一行，列出服务器正在运行的HTTP版本号和应答代码。代码 “200 OK”表示请求完成。 ②MIME_V ersion:1.0
百度文库浏览器分析及实现
百度文库浏览器分析及实现 一、引子 2003年开始玩Flash，完了两年就戒掉了；长时间不用不完慢慢就生疏了。最近应客户的需要，希望能在文档系统中实现类似百度文库的效果。考查一番，咋看起来百度用的是FlashPaper技术，也看了看FlexPaper，在GoogleCode上还看到了一个超大文件的示例，可惜链接打不开，无法去详细分析他们了。 在能看到的应用中，FlashPaper、FlexPaper都不能达到在互联网上动态加载大文档的用户体验需求；唯独百度文库有这样的用户体验，因此就只能拿百度文库开刀了，希望李彦宏同志不要见怪。 姑且拿《六十八个经典小故事》作为示例，该文档页数足够多，能够展示动态加载的效果。 二、百度文库浏览器原理分析步骤 1.找到《六十八个经典小故事》对应的链接； 2.清空IE缓存，在IE中浏览该页面； 3.使用导航将文档浏览至最后； 4.抓取IE缓存中的内容； 5.材料已取好，分析开始。 三、百度文库浏览器代码分析 一进来，刘姥姥进了大观园了，这个JavaScript脚本看得人脑袋那个大啊，这条路走起来挺艰难，换个思路吧；找个Flash反编译工具，反编译一下，取出来ActionScript，这个好歹还有个分行短句啊，总算还是个代码。 整理整理代码的层次结构，按照包组织一下，大致能确认应该在baidu这个文件夹吧；再看看，lib大致是用于json处理的；ui是用于用户自定义控件；iknow 就应该是程序入口吧，按照一般程序要的思路先找一找main吧，果然还真有一个main类，有意思。 下面这几句代码大概就是与外部进行参数交换的吧：
var _loc_2:* = _loc_1["docurl"] || "https://www.wendangku.net/doc/ec4044823.html,:8960/play"; var _loc_3:* = _loc_1["docid"] || "c881e53a580216fc700afd05"; var _loc_4:* = int(_loc_1["fpn"]) || 2; var _loc_5:* = int(_loc_1["npn"]) || 5; this._reader.fpn = _loc_4; this._reader.npn = _loc_5; this._reader.docURL = _loc_2.replace(/(\/)+$/, "") + "/" + _loc_3 + "?"; 如此以来就可以查找docurl、docid、fpn、npn这几个参数了，在JavaScript 或者json中应该有体现的。 在看一看Reader类，再看看DocViewer类大致就知道了百度的FlashPaper 的Reader的原理了。 if (this._firstPagesNum == -1) { tmpURL = this._docURL + "pn=" + (this._pagesLoaded + 1) + "&rn=" +
HTTP工作原理
HTTP协议工作原理是我们现在要为大家介绍的内容。作为WWW的基础的HTTP协议，它的工作原理可以分为外部和内部。试想，一个庞大的网络结构，它的协议又怎么能简单呢。所以我们一定要在了解了HTTP协议的基本结构后来看它的工作流程。 既然我们明白了URL的构成，那么HTTP是怎么工作呢？我们接下来就要讨论这个问题。 一次HTTP操作称为一个事务，HTTP协议工作原理可分为四步： 首先客户机与服务器需要建立连接。只要单击某个超级链接，HTTP的工作就开始了。 建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。 服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。 客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客http工作流程图户机与服务器断开连接。 如果在以上过程中的某一步出现错误，那么产生错误的信息将返回到客户端，有显示屏输出。对于用户来说，这些过程是由HTTP自己完成的，用户只要用鼠标点击，等待信息显示就可以了。 许多HTTP通讯是由一个用户代理初始化的并且包括一个申请在源服务器上资源的请求。最简单的情况可能是在用户代理和服务器之间通过一个单独的连接来完成。在Internet上，HTTP通讯通常发生在TCP/IP连接之上。缺省端口是TCP 80，但其它的端口也是可用的。但这并不预示着HTTP协议在Internet或其它网络的其它协议之上才能完成。HTTP只预示着一个可靠的传输。 这个过程就好像我们打电话订货一样，我们可以打电话给商家，告诉他我们需要什么规格的商品，然后商家再告诉我们什么商品有货，什么商品缺货。这些，我们是通过电话线用电话联系（HTTP是通过TCP/IP），当然我们也可以通过传真，只要商家那边也有传真。 以上简要介绍了HTTP协议的宏观运作方式，下面介绍一下HTTP协议工作原理的内部操作过程。 在WWW中，“客户”与“服务器”是一个相对的概念，只存在于一个特定的连接期间，即在某个连接中的客户在另一个连接中可能作为服务器。基于HTTP
浏览器工作原理
简介 浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入https://www.wendangku.net/doc/ec4044823.html,到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。 本文将基于一些开源浏览器的例子——Firefox、 Chrome及Safari，Safari是部分开源的。 根据W3C（World Wide Web Consortium 万维网联盟）的浏览器统计数据，当前（2011年9月），Firefox、Safari及Chrome的市场占有率综合已快接近50％。（原文为2009年10月，数据没有太大变化）因此，可以说开源浏览器将近占据了浏览器市场的半壁江山。 浏览器的主要功能 浏览器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置，在网络一章有更多讨论。 HTML和CSS规范中规定了浏览器解释html文档的方式，由 W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。 HTML规范的最新版本是HTML4(https://www.wendangku.net/doc/ec4044823.html,/TR/html401/)，HTML5还在 制定中（译注：两年前），最新的CSS规范版本是2（https://www.wendangku.net/doc/ec4044823.html,/TR/CSS2），CSS3也还正在制定中（译注：同样两年前）。 这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web 开发者带来了严重的兼容性问题。 但是，浏览器的用户界面则差不多，常见的用户界面元素包括： ?用来输入URI的地址栏 ?前进、后退按钮 ?书签选项 ?用于刷新及暂停当前加载文档的刷新、暂停按钮 ?用于到达主页的主页按钮 奇怪的是，并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂商之间相互模仿和不断改进得结果。
BS结构的工作原理
B S结构的工作原理 Company Document number：WTUT-WT88Y-W8BBGB-BWYTT-19998
B/S结构的工作原理是：客户端的浏览器通过URL访问Web服务器，Web服务器请求数据库服务器，并将获得的结果以HTML形式返回客户端浏览器。 二、B/S网络模式的结构和特点 B/S网络模式是基于Intranet需求而出现并发展的。一方面Intranet是应用TCP/IP协议中建立的企事业单位内部网络，它采用诸如TCP/IP，HTTP，SMIP和HTML等Internet技术和标准，能为企事业单位内部交换信息提供服务。同时，它是有连接Internet的防止外界入侵的安全措施。另一方面，由于数据库具有强大的数据存储和管理能力，并且能够动态地进行数据输入和输出，如果把数据库应用于Internet上，不仅可以实现大量信息的网上发布，而且能够为广大用户提供动态的信息查询和数据处理服务，进而加强信息交流，降低企事业单位的日常工作成本，提高企事业单位的经济效益。 B/S模式，即浏览器服务器模式，是一种从传统的二层C/S 模式发展起来的新的网络结构模式。其本质是三层结构C/S模式。B/S模式主要由客户机，Web服务器，应用服务器和数据服务器（server）组成。在客户端安装的是标准、易用的通用浏览器（Browser），将Web技术与数据库技术相结合。Web服务器主要是实现对客户端应用程序的集中管理，应用服务器主要负责事务处理，数据服务器主要用于数据的管理， B/S模式基本上克服了C/S模式的不足，其主要表现在：
1．系统开发、维护和升级的经济性。 2．B/S模式提供了一致的用户界面，应用软件都是基于Web浏览器，从而提供了一致的用户界面。 3．B/S模式具有很强的开放性。 4．B/S模式的结构易于扩展，具有可伸缩性。 5．B/S模式具有最强的信息系统集成性。 6．B/S模式提供灵活的交流和信息发布服务。 B/S结构体系与C/S结构体系相比，其优点如下： 1．不必开发专门的客户端软件，在用户终端不需要增加任何代码，用户只需要使用现行的浏览器，基操作十分方便，简单易学，界面统一，降低了用户学习新知识的难度，既节省了开发时间，也减少了系统出错的可能性，降低了维护费用。 2．网络应用系统跨平台，兼容性好，保护原有的软硬件设施，原来的网络操作系统，数据库都可以很容易地加以利用，可以使系统在最短的时间发挥效益。 3．技术上相对成熟，投入费用少，系统维护简便，简单易用，见效快，回报率高，应用Web技术，OA系统只需在服务器上集中实现和配置的维护管理，大大降低了用户用于软件系统维护和升级的难度和费用，用户投资风险小。 4．系统运行稳定、安全、可靠、并可进行扩展。 5．软件移植容易，并可以进行严密的安全管理。
网页及数据库的工作原理
网页提取的工作原理： 网络爬虫是网页检索的核心部分。 网络爬虫定义有广义和狭义之分， 狭义上的定义为利用标准的http协议根据超级链接和web文档检索的方法遍历万维网信息空间的程序； 而广义则是所有能利用http协议检索web文档的软件都称之为网络爬虫。 网络爬虫是一个功能很强的自动提取网页的程序，它为搜索引擎从万维网上下载网页，是搜索引擎的重要部分。它通过请求站点上的HtML文档访问某一个站点。它遍历web空间，不断从一个站点移动到另一个站点，自动建立索引，并加入到网页数据库中。网络爬虫进入某个超级文本时，它利用HTML语言的标记结构来搜索信息及获取指向其他超级文本的URL 地址，可以完全不依赖用户干预实现网络上的自动“爬行”搜索。 浏览器的工作原理： （1）浏览器通过HTML表单或超链接请求指向一个应用程序的URL。 （2）服务器收到用户的请求。 （3）服务器执行已接受创建的指定应用程序。 （4）应用程序通常是基于用户输入的内容，执行所需要的操作。 （5）应用程序把结果格式化为网络服务器和浏览器能够理解的文档，即我们所说的HTML网页 （6）网络服务器最后将结果返回到浏览器中。 ASP的工作原理： （1）用户调出站点内容，默认页面的扩展名是.Asp （2）浏览器从服务器上请求asp文件。 （3）服务器端脚本开始运行ASP。 （4）Asp文件按照从上到下的顺序开始处理，执行脚本命令，执行HTML内容。 （5）页面信息发送到浏览器。 SQL工作原理： （1）SQL语句执行顺序： 1、FROM子句组装来自不停数据源的数据。 2、Where子句基于指定的条件对记录进行筛选。 3、Group by子句将数据划分为多个分组。 4、使用聚集函数进行计算。 5、使用having子句筛选分组。 6、计算所有的表达式。 7、使用order by对结果集进行排序。 数据库： （1）长期储存在计算机内，有组织的、可共享的数据集合。 （2）数据库中的数据不是孤立的，数据与数据之间是相互关联的。 （3）数据库中的数据具有较小的冗余度、较高的数据独立性和易扩展性。 数据库管理系统（DBMS）:是在操作系统的支持下为用户提供数据库建立、数据操纵、数据库维护的管理软件 功能： 1）数据定义。 2）数据操纵功能。
浏览器工作原理新式网络浏览器幕后揭秘
序言 这是一篇全面介绍Webkit 和Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时间来研读网络浏览器的源代码。她写道： 在IE 占据90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了过半的市场份额，因此，是时候来揭开神秘的面纱，一探网络浏览器的内幕了。呃，里面只有数以百万行计的C++ 代码... 塔利在她的网站上公布了自己的研究成果，但是我们觉得它值得让更多的人来了解，所以我们在此重新整理并公布。 作为一名网络开发人员，学习浏览器的内部工作原理将有助于您作出更明智的决策，并理解那些最佳开发实践的个中缘由。尽管这是一篇相当长的文档，但是我们建议您花些时间来仔细阅读；读完之后，您肯定会觉得所费不虚。保罗·爱丽诗(Paul Irish)，Chrome 浏览器开发人员事务部 简介 网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输入https://www.wendangku.net/doc/ec4044823.html, 直到您在浏览器屏幕上看到Google 首页的整个过程中都发生了些什么。 我们要讨论的浏览器 目前使用的主流浏览器有五个：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)： 用户界面- 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。 浏览器引擎- 在用户界面和呈现引擎之间传送指令。 呈现引擎- 负责显示请求的内容。如果请求的内容是HTML，它就负责解析HTML 和CSS 内容，并将解析后的内容显示在屏幕上。 网络- 用于网络调用，比如HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。 用户界面后端- 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。 JavaScript 解释器。用于解析和执行JavaScript 代码。 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如Cookie。新的HTML 规范(HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。