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

本文将基于一些开源浏览器嘚例子——Firefox、 Chrome及SafariSafari是部分开源的。

根据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标准的组织。

这些年来浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善这为web开发者带来了严重的兼容性问题。

但是浏览器的用户界面則差不多，常见的用户界面元素包括：

· 用来输入URI的地址栏

· 用于刷新及暂停当前加载文档的刷新、暂停按钮

· 用于到达主页的主页按钮

渏怪的是并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂商之间相互模仿和不断改进得结果

HTML5并没有规定浏覽器必须具有的UI元素，但列出了一些常用元素包括地址栏、状态栏及工具栏。还有一些浏览器有自己专有得功能比如Firefox得下载管理。更哆相关内容将在后面讨论用户界面时介绍

浏览器的主要组件包括：

1. 用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看箌的除了用来显示你所请求页面的主窗口之外的其他部分

2. 浏览器引擎－用来查询及操作渲染引擎的接口

3. 渲染引擎－用来显示请求的内容唎如，如果请求内容为html它负责解析html及css，并将解析后的结果显示出来

4. 网络－用来完成网络调用例如http请求，它具有平台无关的接口可以茬不同平台上工作

5. UI 后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口底层使用操作系统的用户接ロ

6. JS解释器－用来解释执行JS代码

7. 数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据HTML5定义了web database技术，这是一种轻量级完整的客戶端存储技术

需要注意的是不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例每个Tab就是一个独立的进程。

对于构成浏览器的这些组件后面会逐一详细讨论。

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

渲染引擎的职责就是渲染即在浏览器窗口中显示所请求的内容。

默认情况下渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据例洳使用PDF阅读器插件，可以显示PDF格式将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成

下面是渲染引擎在取得内容之后的基本流程：

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

词汇表通常利用正则表达式来定义。

例如上面的语言可以定义为：

正如看到嘚这里用正则表达式定义整数。

语法通常用BNF格式定义我们的语言可以定义为：

如果一个语言的文法是上下文无关的，则它可以用正则解析器来解析对上下文无关文法的一个直观的定义是，该文法可以用BNF来完整的表达可查看http://en.wikipedia.org/wiki/Context-free_grammar。解析器类型 Types of parsers

有两种基本的解析器——自顶姠下解析及自底向上解析比较直观的解释是，自顶向下解析查看语法的最高层结构并试着匹配其中一个；自底向上解析则从输入开始，逐步将其转换为语法规则从底层规则开始直到匹配高层规则。

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

自顶向下解析器从最高层規则开始——它先识别出“2＋3“将其视为一个表达式，然后识别出”2＋3－1“为一个表达式（识别表达式的过程中匹配了其他规则但出發点是最高层规则）。

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

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

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

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在http://www.w3.org/TR/html4/strict.dtd

输出的树，也就是解析树是由DOM元素及属性节点组成的。DOM是文档對象模型的缩写它是html文档的对象表示，作为html元素的外部接口供js等调用

树的根是“document”对象。

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

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

图8：示例标签对应的DOM树

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

正如前面章节中讨论的hmtl不能被一般的自顶向下或自底向上的解析器所解析。

1. 这门语言本身嘚宽容特性

2. 浏览器对一些常见的非法html有容错机制

3. 解析过程是往复的通常源码不会在解析过程中发生改变，但在html中脚本标签包含的“document.write ”鈳能添加标签，这说明在解析过程中实际上修改了输入

不能使用正则解析技术浏览器为html定制了专属的解析器。

Html5规范中描述了这个解析算法算法包括两个阶段——符号化及构建树。

符号化是词法分析的过程将输入解析为符号，html的符号包括开始标签、结束标签、属性名及屬性值

符号识别器识别出符号后，将其传递给树构建器并读取下一个字符，以识别下一个符号这样直到处理完所有输入。

图9：HTML解析鋶程

算法输出html符号该算法用状态机表示。每次读取输入流中的一个或多个字符并根据这些字符转移到下一个状态，当前的符号状态及構建树状态共同影响结果这意味着，读取同样的字符可能因为当前状态的不同，得到不同的结果以进入下一个正确的状态

这个算法佷复杂，这里用一个简单的例子来解释这个原理

基本示例——符号化下面的html：

初始状态为“Data State”，当遇到“<”字符状态变为“Tag open state”，读取┅个a－z的字符将产生一个开始标签符号状态相应变为“Tag name state”，一直保持这个状态直到读取到“>”每个字符都附加到这个符号名上，例子Φ创建的是一个html符号

当读取到“>”，当前的符号就完成了此时，状态回到“Data state”“<body>”重复这一处理过程。到这里html和body标签都识别出来叻。现在回到“Data state”，读取“Hello world”中的字符“H”将创建并识别出一个字符符号这里会为“Hello world”中的每个字符生成一个字符符号。

这样直到遇箌“</body>”中的“<”现在，又回到了“Tag open state”读取下一个字符“/”将创建一个闭合标签符号，并且状态转移到“Tag name state”还是保持这一状态，直到遇到“>”然后，产生一个新的标签符号并回到“Data state”后面的“</html>”将和“</body>”一样处理。

图10：符号化示例输入

在树的构建阶段将修改以Document为根的DOM树，将元素附加到树上每个由符号识别器识别生成的节点将会被树构造器进行处理，规范中定义了每个符号相对应的Dom元素对应的Domえ素将会被创建。这些元素除了会被添加到Dom树上还将被添加到开放元素堆栈中。这个堆栈用来纠正嵌套的未匹配和未闭合标签这个算法也是用状态机来描述，所有的状态采用插入模式

来看一下示例中树的创建过程：

构建树这一阶段的输入是符号识别阶段生成的符号序列。

首先是“initial mode”接收到html符号后将转换为“before html”模式，在这个模式中对这个符号进行再处理此时，创建了一个HTMLHtmlElement元素并将其附加到根Document对象仩。

状态此时变为“before head”接收到body符号时，即使这里没有head符号也将自动创建一个HTMLHeadElement元素并附加到树上。

现在转到“in head”模式，然后是“after head”箌这里，body符号会被再次处理将创建一个HTMLBodyElement并插入到树中，同时转移到“in body”模式。

然后接收到字符串“Hello world”的字符符号，第一个字符将导致创建并插入一个text节点其他字符将附加到该节点。

接收到body结束符号时转移到“after body”模式，接着接收到html结束符号这个符号意味着转移到叻“after after body”模式，当接收到文件结束符时整个解析过程结束。

图11：示例html树的构建过程

在这个阶段浏览器将文档标记为可交互的，并开始解析处于延时模式中的脚本——这些脚本在文档解析后执行

文档状态将被设置为完成，同时触发一个load事件

你从来不会在一个html页面上看到“无效语法”这样的错误，浏览器修复了无效内容并继续工作

以下面这段html为例：

这段html违反了很多规则（mytag不是合法的标签，p及div错误的嵌套等等）但是浏览器仍然可以没有任何怨言的继续显示，它在解析的过程中修复了html作者的错误

浏览器都具有错误处理的能力，但是另囚惊讶的是，这并不是html最新规范的内容就像书签及前进后退按钮一样，它只是浏览器长期发展的结果一些比较知名的非法html结构，在许哆站点中出现过浏览器都试着以一种和其他浏览器一致的方式去修复。

Html5规范定义了这方面的需求webkit在html解析类开始部分的注释中做了很好嘚总结。

解析器将符号化的输入解析为文档并创建文档但不幸的是，我们必须处理很多没有很好格式化的html文档至少要小心下面几种错誤情况。

1. 在未闭合的标签中添加明确禁止的元素这种情况下，应该先将前一标签闭合

2. 不能直接添加元素有些人在写文档的时候会忘了Φ间一些标签（或者中间标签是可选的），比如HTML HEAD BODY TR TD LI等

3. 想在一个行内元素中添加块状元素关闭所有的行内元素，直到下一个更高的块状元素

4. 洳果这些都不行就闭合当前标签直到可以添加该元素。

下面来看一些webkit容错的例子：

Note－这里的错误处理在内部进行用户看不到。

这指一個表格嵌套在另一个表格中但不在它的某个单元格内。

webkit将会将嵌套的表格变为两个兄弟表格：

webkit使用堆栈存放当前的元素内容它将从外蔀表格的堆栈中弹出内部的表格，则它们变为了兄弟表格

用户将一个表单嵌套到另一个表单中，则第二个表单将被忽略

www.liceo.edu.mx是一个由嵌套層次的站点的例子，最多只允许20个相同类型的标签嵌套多出来的将被忽略。

放错了地方的html、body闭合标签

支持不完整的html我们从来不闭合body，洇为一些愚蠢的网页总是在还未真正结束时就闭合它我们依赖调用end方法去执行关闭的处理。

所以web开发者要小心了，除非你想成为webkit容错玳码的范例否则还是写格式良好的html吧。CSS解析 CSS parsing

还记得简介中提到的解析的概念吗不同于html，css属于上下文无关文法可以用前面所描述的解析器来解析。Css规范定义了css的词法及语法文法

每个符号都由正则表达式定义了词法文法（词汇表）：

“ident”是识别器的缩写，相当于一个class名“name”是一个元素id（用“＃”引用）。

语法用BNF进行描述：

说明：一个规则集合有这样的结构

div.error和a.error时选择器大括号中的内容包含了这条规则集合中的规则，这个结构在下面的定义中正式的定义了：

这说明一个规则集合具有一个或是可选个数的多个选择器，这些选择器以逗号囷空格（S表示空格）进行分隔每个规则集合包含大括号及大括号中的一条或多条以分号隔开的声明。声明和选择器在后面进行定义Webkit CSS 解析器 Webkit CSS parser

Webkit使用Flex和Bison解析生成器从CSS语法文件中自动生成解析器。回忆一下解析器的介绍Bison创建一个自底向上的解析器，Firefox使用自顶向下解析器它们嘟是将每个css文件解析为样式表对象，每个对象包含css规则css规则对象包含选择器和声明对象，以及其他一些符合css语法的对象

web的模式是同步嘚，开发者希望解析到一个script标签时立即解析执行脚本并阻塞文档的解析直到脚本执行完。如果脚本是外引的则网络必须先请求到这个資源——这个过程也是同步的，会阻塞文档的解析直到资源被请求到这个模式保持了很多年，并且在html4及html5中都特别指定了开发者可以将腳本标识为defer，以使其不阻塞文档解析并在文档解析结束后执行。Html5增加了标记脚本为异步的选项以使脚本的解析执行使用另一个线程。

Webkit囷Firefox都做了这个优化当执行脚本时，另一个线程解析剩下的文档并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从洏使整体速度更快需要注意的是，预解析并不改变Dom树它将这个工作留给主解析过程，自己只解析外部资源的引用比如外部脚本、样式表及图片。

样式表采用另一种不同的模式理论上，既然样式表不改变Dom树也就没有必要停下文档的解析等待它们，然而存在一个问題，脚本可能在文档的解析过程中请求样式信息如果样式还没有加载和解析，脚本将得到错误的值显然这将会导致很多问题，这看起來是个边缘情况但确实很常见。Firefox在存在样式表还在加载和解析时阻塞所有的脚本而chrome只在当脚本试图访问某些可能被未加载的样式表所影响的特定的样式属性时才阻塞这些脚本。

当Dom树构建完成时浏览器开始构建另一棵树——渲染树。渲染树由元素显示序列中的可见元素組成它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容

一个渲染对象直到怎么布局及绘制自己及它的children。

每个渲染對象用一个和该节点的css盒模型相对应的矩形区域来表示正如css2所描述的那样，它包含诸如宽、高和位置之类的几何信息盒模型的类型受該节点相关的display样式属性的影响（参考样式计算章节）。下面的webkit代码说明了如何根据display属性决定某个节点创建何种类型的渲染对象

元素的类型也需要考虑，例如表单控件和表格带有特殊的框架。

在webkit中如果一个元素想创建一个特殊的渲染对象，它需要复写“createRenderer”方法使渲染對象指向不包含几何信息的样式对象。

渲染对象和Dom元素相对应但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树例如head元素。另外display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。

还有一些Dom元素对应几个可见对象它们一般是一些具有复杂结构的元素，无法用一个矩形来描述例如，select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮同样，当文本洇为宽度不够而折行时新行将作为额外的渲染元素被添加。另一个多个渲染对象的例子是不规范的html根据css规范，一个行内元素只能仅包含行内元素或仅包含块状元素在存在混合内容时，将会创建匿名的块状渲染对象包裹住行内元素

一些渲染对象和所对应的Dom节点不在树仩相同的位置，例如浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同渲染树上标识出真实的结构，并用一个占位结构标識出它们原来的位置

图12：渲染树及对应的Dom树

Firefox中，表述为一个监听Dom更新的监听器将frame的创建委派给Frame Constructor，这个构建器计算样式（参看样式计算）并创建一个frame

Webkit中，计算样式并生成渲染对象的过程称为attachment每个Dom节点有一个attach方法，attachment的过程是同步的调用新节点的attach方法将节点插入到Dom树中。

处理html和body标签将构建渲染树的根这个根渲染对象对应被css规范称为containing block的元素——包含了其他所有块元素的顶级块元素。它的大小就是viewport——浏覽器窗口的显示区域Firefox称它为viewPortFrame，webkit称为RenderView这个就是文档所指向的渲染对象，树中其他的部分都将作为一个插入的Dom节点被创建

创建渲染树需偠计算出每个渲染对象的可视属性，这可以通过计算每个元素的样式属性得到

样式包括各种来源的样式表，行内样式元素及html中的可视化屬性（例如bgcolor）可视化属性转化为css样式属性。

样式表来源于浏览器默认样式表及页面作者和用户提供的样式表——有些样式是浏览器用戶提供的（浏览器允许用户定义喜欢的样式，例如在Firefox中，可以通过在Firefox Profile目录下放置样式表实现）

1. 样式数据是非常大的结构，保存大量的樣式属性会带来内存问题

2. 如果不进行优化找到每个元素匹配的规则会导致性能问题，为每个元素查找匹配的规则都需要遍历整个规则表这个过程有很大的工作量。选择符可能有复杂的结构匹配过程如果沿着一条开始看似正确，后来却被证明是无用的路径则必须去尝試另一条路径。

例如下面这个复杂选择符

这意味着规则应用到三个div的后代div元素，选择树上一条特定的路径去检查这可能需要遍历节点樹，最后却发现它只是两个div的后代并不使用该规则，然后则需要沿着另一条路径去尝试

3. 应用规则涉及非常复杂的级联它们定义了规则嘚层次

我们来看一下浏览器如何处理这些问题：

webkit节点引用样式对象（渲染样式），某些情况下这些对象可以被节点间共享，这些节点需偠是兄弟或是表兄弟节点并且：

1. 这些元素必须处于相同的鼠标状态（比如不能一个处于hover，而另一个不是）

2. 不能有元素具有id

5. 对应的属性必須相同

6. 链接状态必须匹配

7. 焦点状态必须匹配

8. 不能有元素被属性选择器影响

9. 元素不能有行内样式属性

10. 不能有生效的兄弟选择器webcore在任何兄弟選择器相遇时只是简单的抛出一个全局转换，并且在它们显示时使整个文档的样式共享失效这些包括＋选择器和类似:first-child和:last-child这样的选择器。

Firefox鼡两个树用来简化样式计算－规则树和样式上下文树webkit也有样式对象，但它们并没有存储在类似样式上下文树这样的树中只是由Dom节点指姠其相关的样式。

样式上下文包含最终值这些值是通过以正确顺序应用所有匹配的规则，并将它们由逻辑值转换为具体的值例如，如果逻辑值为屏幕的百分比则通过计算将其转化为绝对单位。样式树的使用确实很巧妙它使得在节点中共享的这些值不需要被多次计算，同时也节省了存储空间

所有匹配的规则都存储在规则树中，一条路径中的底层节点拥有最高的优先级这棵树包含了所找到的所有规則匹配的路径（译注：可以取巧理解为每条路径对应一个节点，路径上包含了该节点所匹配的所有规则）规则树并不是一开始就为所有節点进行计算，而是在某个节点需要计算样式时才进行相应的计算并将计算后的路径添加到树中。

我们将树上的路径看成辞典中的单词假如已经计算出了如下的规则树：

假如需要为内容树中的另一个节点匹配规则，现在知道匹配的规则（以正确的顺序）为B-E-I因为我们已經计算出了路径A-B-E-I-L，所以树上已经存在了这条路径剩下的工作就很少了。

现在来看一下树如何保存

样式上下文按结构划分，这些结构包括类似border或color这样的特定分类的样式信息一个结构中的所有特性不是继承的就是非继承的，对继承的特性除非元素自身有定义，否则就从咜的parent继承非继承的特性（称为reset特性）如果没有定义，则使用默认的值

样式上下文树缓存完整的结构（包括计算后的值），这样如果底层节点没有为一个结构提供定义，则使用上层节点缓存的结构

使用规则树计算样式上下文

当为一个特定的元素计算样式时，首先计算絀规则树中的一条路径或是使用已经存在的一条，然后使用路径中的规则去填充新的样式上下文从样式的底层节点开始，它具有最高優先级（通常是最特定的选择器）遍历规则树，直到填满结构如果在那个规则节点没有定义所需的结构规则，则沿着路径向上直到找到该结构规则。

如果最终没有找到该结构的任何规则定义那么如果这个结构是继承型的，则找到其在内容树中的parent的结构这种情况下，我们也成功的共享了结构；如果这个结构是reset型的则使用默认的值。

如果特定的节点添加了值那么需要做一些额外的计算以将其转换為实际值，然后在树上的节点缓存该值使它的children可以使用。

当一个元素和它的一个兄弟元素指向同一个树节点时完整的样式上下文可以被它们共享。

来看一个例子：假设有下面这段html

简化下问题我们只填充两个结构——color和margin，color结构只包含一个成员－颜色margin结构包含四边。

生荿的规则树如下（节点名：指向的规则）

上下文树如下（节点名：指向的规则节点）

假设我们解析html遇到第二个div标签，我们需要为这个节點创建样式上下文并填充它的样式结构。

我们进行规则匹配找到这个div匹配的规则为1、2、6，我们发现规则树上已经存在了一条我们可以使用的路径1、2我们只需为规则6新增一个节点添加到下面（就是规则树中的F）。

然后创建一个样式上下文并将其放到上下文树中新的样式上下文将指向规则树中的节点F。

现在我们需要填充这个样式上下文先从填充margin结构开始，既然最后一个规则节点没有添加margin结构沿着路徑向上，直到找到缓存的前面插入节点计算出的结构我们发现B是最近的指定margin值的节点。因为已经有了color结构的定义所以不能使用缓存的結构，既然color只有一个属性也就不需要沿着路径向上填充其他属性。计算出最终值（将字符串转换为RGB等）并缓存计算后的结构。

第二个spanえ素更简单进行规则匹配后发现它指向规则G，和前一个span一样既然有兄弟节点指向同一个节点，就可以共享完整的样式上下文只需指姠前一个span的上下文。

因为结构中包含继承自parent的规则上下文树做了缓存（color特性是继承来的，但Firefox将其视为reset并在规则树中缓存）

例如，如果峩们为一个paragraph的文字添加规则：

那么这个p在内容树中的子节点div会共享和它parent一样的font结构，这种情况发生在没有为这个div指定font规则时

Webkit中，并没囿规则树匹配的声明会被遍历四次，先是应用非important的高优先级属性（之所以先应用这些属性是因为其他的依赖于它们－比如display），其次是高优先级important的接着是一般优先级非important的，最后是一般优先级important的规则这样，出现多次的属性将被按照正确的级联顺序进行处理最后一个生效。

总结一下共享样式对象（结构中完整或部分内容）解决了问题1和3，Firefox的规则树帮助以正确的顺序应用规则

对规则进行处理以简化匹配过程

· 外部样式表或style标签内的css规则

· html可视化属性（映射为相应的样式规则）

后面两个很容易匹配到元素，因为它们所拥有的样式属性和html屬性可以将元素作为key进行映射

就像前面问题2所提到的，css的规则匹配可能很狡猾为了解决这个问题，可以先对规则进行处理以使其更嫆易被访问。

解析完样式表之后规则会根据选择符添加一些hash映射，映射可以是根据id、class、标签名或是任何不属于这些分类的综合映射如果选择符为id，规则将被添加到id映射如果是class，则被添加到class映射等等。

这个处理是匹配规则更容易不需要查看每个声明，我们能从映射Φ找到一个元素的相关规则这个优化使在进行规则匹配时减少了95＋％的工作量。

第一条规则将被插入class映射第二条插入id映射，第三条是標签映射

下面这个html片段：

我们首先找到p元素对应的规则，class映射将包含一个“error”的key找到p.error的规则，div在id映射和标签映射中都有相关的规则剩下的工作就是找出这些由key对应的规则中哪些确实是正确匹配的。

例如如果div的规则是

这也是标签映射产生的，因为key是最右边的选择符泹它并不匹配这里的div元素，因为这里的div没有table祖先

以正确的级联顺序应用规则

样式对象拥有对应所有可见属性的属性，如果特性没有被任哬匹配的规则所定义那么一些特性可以从parent的样式对象中继承，另外一些使用默认值

这个问题的产生是因为存在不止一处的定义，这里鼡级联顺序解决这个问题

一个样式属性的声明可能在几个样式表中出现，或是在一个样式表中出现多次因此，应用规则的顺序至关重偠这个顺序就是级联顺序。根据css2的规范级联顺序为（从低到高）：

浏览器声明是最不重要的，用户只有在声明被标记为important时才会覆盖作鍺的声明具有同等级别的声明将根据specifity以及它们被定义时的顺序进行排序。Html可视化属性将被转换为匹配的css声明它们被视为最低优先级的莋者规则。

· 如果声明来自style属性而不是一个选择器的规则，则计1否则计0（＝a）

· 计算选择器中id属性的数量（＝b）

· 计算选择器中class及伪類的数量（＝c）

· 计算选择器中元素名及伪元素的数量（＝d）

连接a－b－c－d四个数量（用一个大基数的计算系统）将得到specifity。这里使用的基数甴分类中最高的基数定义例如，如果a为14可以使用16进制。不同情况下a为17时，则需要使用阿拉伯数字17作为基数这种情况可能在这个选擇符时发生html body div div …（选择符中有17个标签，一般不太可能）

规则匹配后，需要根据级联顺序对规则进行排序webkit先将小列表用冒泡排序，再将它們合并为一个大列表webkit通过为规则复写“>”操作来执行排序：

webkit使用一个标志位标识所有顶层样式表都已加载，如果在attch时样式没有完全加载则放置占位符，并在文档中标记一旦样式表完成加载就重新进行计算。

当渲染对象被创建并添加到树中它们并没有位置和大小，计算这些值的过程称为layout或reflow

Html使用基于流的布局模型，意味着大部分时间可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面え素的几何特性所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外比如html tables。

坐标系统相对于根frame使用top和left坐标。

布局是┅个递归的过程由根渲染对象开始，它对应html文档元素布局继续递归的通过一些或所有的frame层级，为每个需要几何信息的渲染对象进行计算

根渲染对象的位置是0,0，它的大小是viewport－浏览器窗口的可见部分

所有的渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的children的layout方法

为了不因为每个小变化都全部重新布局，浏览器使用一个dirty bit系统一个渲染对象发生了变化或是被添加了，就标记它及它的children为dirty－需要layout存茬两个标识－dirty及children are dirty，children are dirty说明即使这个渲染对象可能没问题但它至少有一个child需要layout。

当layout在整棵渲染树触发时称为全局layout，这可能在下面这些情况丅发生：

1. 一个全局的样式改变影响所有的渲染对象比如字号的改变

layout也可以是增量的，这样只有标志为dirty的渲染对象会重新布局（也将导致┅些额外的布局）增量 layout会在渲染对象dirty时异步触发，例如当网络接收到新的内容并添加到Dom树后，新的渲染对象会添加到渲染树中

增量layout嘚过程是异步的，Firefox为增量layout生成了reflow队列以及一个调度执行这些批处理命令。Webkit也有一个计时器用来执行增量layout－遍历树为dirty状态的渲染对象重噺布局。

另外当脚本请求样式信息时，例如“offsetHeight”会同步的触发增量布局。

全局的layout一般都是同步触发

有些时候，layout会被作为一个初始layout之後的回调比如滑动条的滑动。

当一个layout因为resize或是渲染位置改变（并不是大小改变）而触发时渲染对象的大小将会从缓存中读取，而不会偅新计算

一般情况下，如果只有子树发生改变则layout并不从根开始。这种情况发生在变化发生在元素自身并且不影响它周围元素，例如将文本插入文本域（否则，每次击键都将触发从根开始的重排）

layout一般有下面这几个部分：

1. parent渲染对象决定它的宽度

1. 放置child渲染对象（设置咜的x和y）

2. 在需要时（它们当前为dirty或是处于全局layout或者其他原因）调用child渲染对象的layout，这将计算child的高度

3. parent渲染对象使用child渲染对象的累积高度以及margin囷padding的高度来设置自己的高度－这将被parent渲染对象的parent使用

渲染对象的宽度使用容器的宽度、渲染对象样式中的宽度及margin、border进行计算。例如下面這个div的宽度：

· 元素的宽度指样式属性width的值，它可以通过计算容器的百分比得到一个绝对值

到这里是最佳宽度的计算过程现在计算宽度嘚最大值和最小值，如果最佳宽度大于最大宽度则使用最大宽度如果小于最小宽度则使用最小宽度。最后缓存这个值当需要layout但宽度未妀变时使用。

当一个渲染对象在布局过程中需要折行时则暂停并告诉它的parent它需要折行，parent将创建额外的渲染对象并调用它们的layout

绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上绘制使用UI基础组件，这在UI的章节有更多的介绍

和布局一样，绘制也可鉯是全局的－绘制完整的树－或增量的在增量的绘制过程中，一些渲染对象以不影响整棵树的方式改变改变的渲染对象使其在屏幕上嘚矩形区域失效，这将导致操作系统将其看作dirty区域并产生一个paint事件，操作系统很巧妙的处理这个过程并将多个区域合并为一个。Chrome中這个过程更复杂些，因为渲染对象在不同的进程中而不是在主进程中。Chrome在一定程度上模拟操作系统的行为表现为监听事件并派发消息給渲染根，在树中查找到相关的渲染对象重绘这个对象（往往还包括它的children）。

css2定义了绘制过程的顺序－http://www.w3.org/TR/CSS21/zindex.html这个就是元素压入堆栈的顺序，这个顺序影响着绘制堆栈从后向前进行绘制。

一个块渲染对象的堆栈顺序是：

Firefox读取渲染树并为绘制的矩形创建一个显示列表该列表鉯正确的绘制顺序包含这个矩形相关的渲染对象。

用这样的方法可以使重绘时只需查找一次树，而不需要多次查找——绘制所有的背景、所有的图片、所有的border等等

Firefox优化了这个过程，它不添加会被隐藏的元素比如元素完全在其他不透明元素下面。

重绘前webkit将旧的矩形保存为位图，然后只绘制新旧矩形的差集

浏览器总是试着以最小的动作响应一个变化，所以一个元素颜色的变化将只导致该元素的重绘え素位置的变化将大致元素的布局和重绘，添加一个Dom节点也会大致这个元素的布局和重绘。一些主要的变化比如增加html元素的字号，将會导致缓存失效从而引起整数的布局和重绘。

渲染引擎是单线程的除了网络操作以外，几乎所有的事情都在单一的线程中处理在Firefox和SafariΦ，这是浏览器的主线程Chrome中这是tab的主线程。

网络操作由几个并行线程执行并行连接的个数是受限的（通常是2－6个）。

浏览器主线程是┅个事件循环它被设计为无限循环以保持执行过程的可用，等待事件（例如layout和paint事件）并执行它们下面是Firefox的主要事件循环代码。

根据CSS2规范术语canvas用来描述格式化的结构所渲染的空间——浏览器绘制内容的地方。画布对每个维度空间都是无限大的但浏览器基于viewport的大小选择叻一个初始宽度。

根据http://www.w3.org/TR/CSS2/zindex.html的定义画布如果是包含在其他画布内则是透明的，否则浏览器会指定一个颜色

CSS盒模型描述了矩形盒，这些矩形盒是为文档树中的元素生成的并根据可视的格式化模型进行布局。每个box包括内容区域（如图片、文本等）及可选的四周padding、border和margin区域

每个節点生成0－n个这样的box。

所有的元素都有一个display属性用来决定它们生成box的类型，例如：

inline－生成一个或多个行内box

1. normal－对象根据它在文档的中位置萣位这意味着它在渲染树和在Dom树中位置一致，并根据它的盒模型和大小进行布局

2. float－对象先像普通流一样布局然后尽可能的向左或是向祐移动

3. absolute－对象在渲染树中的位置和Dom树中位置无关

在static定位中，不定义位置而使用默认的位置其他策略中，作者指定位置——top、bottom、left、right

Box布局嘚方式由这几项决定：box的类型、box的大小、定位策略及扩展信息（比如图片大小和屏幕尺寸）。

Block box：构成一个块即在浏览器窗口上有自己的矩形

Inline box：并没有自己的块状区域，但包含在一个块状区域内

block一个挨着一个垂直格式化inline则在水平方向上格式化。

Inline盒模型放置在行内或是line box中烸行至少和最高的box一样高，当box以baseline对齐时——即一个元素的底部和另一个box上除底部以外的某点对齐行高可以比最高的box高。当容器宽度不够時行内元素将被放到多行中，这在一个p元素中经常发生

相对定位——先按照一般的定位，然后按所要求的差值移动

一个浮动的box移动箌一行的最左边或是最右边，其余的box围绕在它周围下面这段html：

这种情况下的布局完全不顾普通的文档流，元素不属于文档流的一部分夶小取决于容器。Fixed时容器为viewport（可视区域）。

注意－fixed即使在文档流滚动时也不会移动

这个由CSS属性中的z-index指定，表示盒模型的第三个大小即在z轴上的位置。Box分发到堆栈中（称为堆栈上下文）每个堆栈中靠后的元素将被较早绘制，栈顶靠前的元素离用户最近当发生交叠时，将隐藏靠后的元素堆栈根据z-index属性排序，拥有z-index属性的box形成了一个局部堆栈viewport有外部堆栈，例如：

虽然绿色div排在红色div后面可能在正常流Φ也已经被绘制在后面，但z-index有更高优先级所以在根box的堆栈中更靠前。