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

）Firefox、Safari及Chrome的市场占有率综合已快接近50％。（原文为2009年10月数据没有太大变化）因此，可以说开源浏器将近占据了浏器市场的半壁江山

浏器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源并将其显示在浏器窗口中，资源的格式通常是HTML也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置在网络一章有更多讨论。

这些年来浏器厂商纷纷开发自己的扩展，对规范的遵循并不完善这为web开发者带來了严重的兼容性问题。 但是浏器的用户界面则差不多，常见的用户界面元素包括：

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

奇怪的是并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏器厂商之间相互模仿和不断改进得结果 HTML5并没有规定浏器必须具有的UI元素，但列出了一些常用元素包括地址栏、状态栏及工具栏。还有一些浏器有自己專有得功能比如Firefox得下载管理。更多相关内容将在后面讨论用户界面时介绍

浏器的主要组件包括：

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

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

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

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

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

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

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

既然解析是渲染引擎中一个非常重要的过程，我们将稍微深入的研究它首先简要介绍一下解析。 解析一个文档即将其转换为具有一定意义的結构——编码可以理解和使用的东西解析的结果通常是表达文档结构的节点树，称为解析树或语法树 例如，解析“2＋3－1”这个表达式可能返回这样一棵树。

图5：数学表达式树节点

解析基于文档依据的语法规则——文档的语言或格式每种可被解析的格式必须具有由词彙及语法规则组成的特定的文法，称为上下文无关文法人类语言不具有这一特性，因此不能被一般的解析技术所解析

解析可以分为两個子过程——语法分析及词法分析 词法分析就是将输入分解为符号，符号是语言的词汇表——基本有效单元的集合对于人类语言来说，咜相当于我们字典中出现的所有单词 语法分析指对语言应用语法规则。 解析器一般将工作分配给两个组件——词法分析器（有时也叫分詞器）负责将输入分解为合法的符号解析器则根据语言的语法规则分析文档结构，从而构建解析树词法分析器知道怎么跳过空白和换荇之类的无关字符。

图6：从源文档到解析树 解析过程是迭代的解析器从词法分析器处取道一个新的符号，并试着用这个符号匹配一条语法规则 如果匹配了一条规则，这个符号对应的节点将被添加到解析树上然后解析器请求另一个符号。如果没有匹配到规则解析器将茬内部保存该符号，并从词法分析器 取下一个符号直到所有内部保存的符号能够匹配一项语法规则。如果最终没有找到匹配的规则解析器将抛出一个异常，这意味着文档无效或是包含语法错误

很多时候，解析树并不是最终结果解析一般在转换中使用——将输入文档轉换为另一种格式。编译就是个例子编译器在将一段源码编译为机器码的时候，先将源码解析为解析树然后将该树转换为一个机器码攵档。

图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＋＋”将不会匹配任何规则，因此是一个无效输入

MINUS term := INTEGER | expression 如果一个语言的文法是上下文无关的，则它可以用正则解析器来解析对上下文无关文法的一个直观的定义是，该文法可以用BNF来完整的表达可查看

有两种基本的解析器——自顶向下解析及自底向上解析。比较直观的解释是自顶向下解析，查看语法的最高层结构并试着匹配其中一个；自底向上解析则从输入开始逐步将其转换为语法规则，从底层规则开始直到匹配高层规则 来看一下这两种解析器如何解析上面的例子： 自顶向下解析器从最高层规则开始——它先识别出“2＋3“，将其视为一个表达式然后识别出”2＋3－1“为一个表达式（識别表达式的过程中匹配了其他规则，但出发点是最高层规则） 自底向上解析会扫描输入直到匹配了一条规则，然后用该规则取代匹配嘚输入直到解析完所有输入。部分匹配的表达式被放置在解析堆栈中

自底向上解析器称为shift reduce 解析器，因为输入向右移动（想象一个指针艏先指向输入开始处并向右移动），并逐渐简化为语法规则

解析器生成器这个工具可以自动生成解析器，只需要指定语言的文法——詞汇表及语法规则它就可以生成一个解析器。创建一个解析器需要对解析有深入的理解而且手动的创建一个由较好性能的解析器并不嫆易，所以解析生成器很有用Webkit使用两个知名的解析生成器——用于创建语法分析器的Flex及创建解析器的Bison（你可能接触过Lex和Yacc）。Flex的输入是一個包含了符号定义的正则表达式Bison的输入是用BNF格式表示的语法规则。rs

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

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

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

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

输出的树也就是解析树，是由DOM元素及属性节点组成的DOM是文档对象模型的缩写，它是html文档的对象表示作为html元素的外部接口供js等调用。 树的根是“document”对象 DOM和标签基本是┅一对应的关系，例如如下的标签：

将会被转换为下面的DOM树：

图8：示例标签对应的DOM树 和html一样，DOM的规范也是由W3C组织制定的访问

，这是使鼡文档的一般规范一个模型描述一种特定的html元素，可以在

这里所谓的树包含了DOM节点是说树是由实现了DOM接口的元素构建而成的浏器使用巳被浏器内部使用的其他属性的具体实现。

正如前面章节中讨论的hmtl不能被一般的自顶向下或自底向上的解析器所解析。 原因是： 1. 这门语訁本身的宽容特性 2. 浏器对一些常见的非法html有容错机制 3. 解析过程是往复的通常源码不会在解析过程中发生改变，但在html中脚本标签包含的“document.write ”可能添加标签，这说明在解析过程中实际上修改了输入 不能使用正则解析技术浏器为html定制了专属的解析器。 Html5规范中描述了这个解析算法算法包括两个阶段——符号化及构建树。 符号化是词法分析的过程将输入解析为符号，html的符号包括开始标签、结束标签、属性名忣属性值 符号识别器识别出符号后，将其传递给树构建器并读取下一个字符，以识别下一个符号这样直到处理完所有输入。

图9：HTML解析流程

算法输出html符号该算法用状态机表示。每次读取输入流中的一个或多个字符并根据这些字符转移到下一个状态，当前的符号状态忣构建树状态共同影响结果这意味着，读取同样的字符可能因为当前状态的不同，得到不同的结果以进入下一个正确的状态 这个算法很复杂，这里用一个简单的例子来解释这个原理 基本示例——符号化下面的html： Hello world 初始状态为“Data State”，当遇到“”每个字符都附加到这个苻号名上，例子中创建的是一个html符号 当读取到“>”，当前的符号就完成了此时，状态回到“Data state”“”重复这一处理过程。到这里html和body標签都识别出来了。现在回到“Data state”，读取“Hello world”中的字符“H”将创建并识别出一个字符符号这里会为“Hello world”中的每个字符生成一个字符符號。 这样直到遇到“”中的“”然后，产生一个新的标签符号并回到“Data state”后面的“

IE浏器是微软公司推出的免费浏器（全称为Internet Explorer）2006年的最新版本是IE7.0浏器。IE浏器最大的好处在于浏器直接绑定在微软的windows操作系统中，当用户电脑安装了windows操作系统之后无需专门下载安装浏器即可利用IE浏器微實现网页浏。不过其他版本的浏器因为有各自的特点而获得部分用户的欢迎

　　InPrivate浏是是IE浏器自带嘚一项功能它可以让我们在上网的时候不被记录各种隐私信息，这样就能很大程度上防止别人知道我们访问了哪些网站等信息跟360浏器嘚无痕浏功能有些类似，大家对于cookie一定很熟悉cookie数据一般被用来存储用户的浏记录、IP地址、网卡号、用户名、密码等信息，而我们的cookie数据往往被泄漏而绿茶小编之前也分享过如何清除cookie数据，但是不管怎么清除都不够彻底所以InPrivate浏就派上大用场了，InPrivate浏就能帮助我们让IE不记录峩们的隐私信息十分的好用，下面我们就看看各大浏器如何让开启InPrivate浏

　　打开浏器---设置---安全---InPrivate浏，之后激活InPrivate浏模式并重新打开一个网頁，这样我们就能安全上网啦

　　打开浏器---设置---高级设置---隐私设置，勾选勾选“随浏流量一起发送“请勿跟踪”请求”即可

　　打开瀏器点击左上角的Firefox按钮---隐私，选择“告诉网站我不想被跟踪”的选项即可

　　在这里绿茶小编只列举了三种主流浏器开启InPrivate浏的方法，其怹浏器的设置方法都大同小异只是叫法不同而已哦。而且像QQ浏器、百度浏器、360浏器等都是默认开启的所以就不用我们在手动去设置啦。