浏览器渲染引擎学习总结
简单介绍浏览器渲染引擎情况
很多人就只会用浏览器，不知道浏览器的工作原理或者说浏览器最核心的东西，浏览器的内核是最核
心的东西，也叫做渲染引擎，那这个东西到底是干嘛的呢，下面本教程就为大家好好介绍一下：
l 主流浏览器内核介绍
主流浏览器内核分类：浏览器内核种类繁多，商用的加上非商业的免费内核，大约有10款以上甚至
更多，不过通常比较常见的大约只有以下4种，下面就简单介绍一下。
(1)Trident
Trident(又称为MSHTML)，是微软的Windows搭载的网页浏览器——Internet
Explorer浏览器使用的内核(俗称IE内核)，该内核程序在1997年的IE
4中首次被采用，之后不断地加入新的技术并随着新版本的IE发布。Trident实际上是一款开放的内核，
Trident引擎被设计成一个软件组件(模块)，使得其他软件开发人员很容易将网页浏览功能加到他们自行
开发的应用程序里，其接口内核设计相当成熟，因此才涌现出许多采用IE内核而非IE的浏览器(如
Maxthon、软媒的闪游浏览器、腾讯的TT、GreenBrowser等)，但是Trident只能用于Windows平台。
由于IE本身的“垄断性”而使得Trident内核在很长时间内都是一家独大，微软也在相当长一段时间
内都没有更新Trident内核，这就导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节;二是
Trident内核的大量Bug等安全性问题没有得到及时解决。目前，微软对Trident排版引擎做了重大变动，
除了加入新的技术之外，还增加了对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其他
的排版引擎，如Gecko、WebCore、KHTML及Presto。
(2)Gecko
Gecko是开放源代码、以C++编写的网页排版引擎，目前被Mozilla家族网页浏览器以及Netscape
6以后版本浏览器所使用。这款软件原本是由网景通讯公司开发的，现在则由Mozilla基金会维护。由于
Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功
能。因为这是个开源内核，因此受到许多人的青睐，采用Gecko内核的浏览器也很多，这也是Gecko内核
虽然年轻但市场占有率能够迅速提高的重要原因。
Gecko排版引擎提供了一个丰富的程序界面以供与互联网相关的应用程序使用，例如网页浏览器、
HTML编辑器、客户端/服务器等。虽然最初的主要对象是Mozilla的衍生产品，如Netscape和Mozilla
Firefox，但是现在已有很多其他软件利用这个排版引擎。此外Gecko也是一个跨平台内核，可以在
Windows、BSD、Linux和Mac OS X中使用。
========
浏览器是怎样工作的：渲染引擎，HTML解析（连载二）
渲染引擎渲染引擎的职责是……渲染，也就是把请求的内容显示到浏览器屏幕上。
默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（浏览器扩展）它可以显示其它类型
文档。比如使用PDF viewer插件显示PDF文件。我们会在一个专门的章节讨论插件与扩展。在这一节我们
将专注渲染引擎的主要用途——显示用CSS格式化的HTML与图片。
各种渲染引擎
我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上：Firefox使用Gecko —— Mozilla自
家的渲染引擎；Safari 和 Chrome 都使用 Webkit。
Webkit 是一个开源的渲染引擎，它源自Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与
Windows平台。更多信息可以参考： http://webkit.org/ 。
主要流程
渲染引擎开始于从网络层获取请求内容，一般是不超过8Ｋ的数据块。接下来就是渲染引擎的基本工作流
程：
图 2：渲染引擎的基本工作流程（解析ＨＴＭＬ构建ＤＯＭ树，渲染树构建，渲染树布局，绘制渲染树
）。
渲染引擎会解析ＨＴＭＬ文档并把标签转换成内容树中的ＤＯＭ节点。它会解析style元素和外部文件中
的样式数据。样式数据和ＨＴＭＬ中的显示控制将共同用来创建另一棵树——渲染树。
渲染树包含带有颜色，尺寸等显示属性的矩形。这些矩形的顺序与显示顺序一致。
渲染树构建完成后就是”布局“处理，也就是确定每个节点在屏幕上的确切显示位置。 下一个步骤是
绘制 —— 遍历渲染树并用ＵＩ后端层将每一个节点绘制出来。
一定要理解这是一个缓慢的过程，为了更好的用户体验，渲染引擎会尝试尽快的把内容显示出来。它不
会等到所有ＨＴＭＬ都被解析完才创建并布局渲染树。它会 在处理后续内容的同时把处理过的局部内容
先展示出来。
主要流程示例
图 3：Webkit主要流程
图 4：Mozilla的Gecko渲染引擎主要流程(3.6)
从图3和图4中可以看出，尽管Webkit与Gecko使用略微不同的术语，这个过程还是基本相同的。
Gecko 里把格式化好的可视元素称做“帧树”（Frame tree）。每个元素就是一个帧（frame）。
Webkit 则使用”渲染树”这个术语，渲染树由”渲染对象”组成。Webkit 里使用”layout”表示元素
的布局，Gecko则称为”Reflow”。Webkit使用”Attachment”来连接DOM节点与可视化信息以构建渲染
树。一个非语义上的小差别是Gecko在ＨＴＭＬ与ＤＯＭ树之间有一个附加的层 ，称作”content sink
”，是创建ＤＯＭ对象的工厂。我们会讨论流程中的每一部分。
解析
因为解析是渲染引擎中一个很重要的处理，我们会讲的略深入一些。让我们从一个小的解析介绍开始。
解析一个文档意味着把它翻译成有意义的结构以供代码使用。解析的结果通常是一个表征文档的由节点
组成的树，称为解析树或句法树。
示例——解析表达式”2 + 3 – 1″可以返回下面的树：
图 5：数学表达式树节点
语法
解析是基于文档所遵循的语法规则——书写所用的语言或格式——来进行的。每一种可以解析的格式必
须由确定的语法与词汇组成。这被称之为上下文无关语法。 人类语言并非此种语言，所以不能用常规的
解析技术来解析。
解析器——词法分析器组合
解析器有两个处理过程——词法分析与句法分析。
词法分析负责把输入切分成符号序列，符号是语言的词汇——由该语言所有合法的单词组成。
句法分析是对该语言句法法则的应用。
解析器通常把工作分给两个组件——分词程序负责把输入切分成合法符号序列，解析程序负责按照句法
规则分析文档结构和构建句法树。词法分析器知道如何过滤像空格，换行之类的无关字符。
图 6：从源文档到解析树（文档，词法分析，句法分析，解析树）。
解析过程是交互式的。解析器通常会从词法分析器获取新符号并尝试匹配句法规则。如果匹配成功，就
在句法树上创建相应的节点，并继续从词法分析器获取下一个符号。如果没有匹配的规则，解析器会内
部保存这个符号，并继续从词法分析器获取符号，直到内部保存的所有符号能够成功匹配一个规则。如
果最终无法匹配，解析器会抛出异常。这意味着文档无效，含有句法错误。
转换
多数情况下解析树并非最终结果。解析经常是为了从输入文档转换成另外一种格式。比如编译器要把源
码编译成机器码，会首先解析成解析树，再把解析树转换成机器码。
图 7：编译过程（源码，解析，解析树，转换，机器码）。
解析示例
在图5中我们构建了一个数学表达式解析树。让我们来试着定义一个简单的数学语言并看看解析是如何进
行的。
词汇：我们的语言可以包含整数，加号和减号。
句法：
句法块由表达式，术语及操作符组成。
我们的语言可以包含任意数量表达式。
表达式定义为术语紧跟着操作符，再跟另外一个术语。
操作符是加号或减号。
术语可以是整数或表达式。
让我们分析输入”2 + 3 – 1″。
第一个符合规则的子字符串是”2″，根据规则#5它是一个术语。第二个匹配是”2 + 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
完整的表达。其规范定义请参考 http://en.wikipedia.org/wiki/Context-free_grammar
解析器的类型
解析器有两种基本类型——自上而下解析器和自下而上解析器。主观上可以认为自上而下的解析器从上
层句法结构开始尝试匹配句法；自下而上的则从输入开始，慢慢转换成句法规则，从底层规则开始，直
到上层规则全部匹配。
让我们看看这两种解析器将怎样解析我们的例子：
自上而下解析器从上层规则开始，它会把”2 + 3″定义为表达式，然后定义”2 + 3 – 1″为表达式(
定义表达式的过程中也会匹配其它规则，但起点是最高级别规则)。
自下而上的解析器会扫描输入，直到有匹配的规则，它会把输入替换成规则。这样一直到输入结束。部
分匹配的规则会放入解析堆栈。
Stack Input
2 + 3 – 1
term + 3 – 1
term operation 3 – 1
expression – 1
expression operation 1
expression
这种自下而上的解析器叫作移位归约解析器，因为输入被向右移动(想象一下一个指针从指向输入开始逐
渐向右移动) 并逐渐归约到句法树。
自动创建解析器
有一些工具可以为你创建解析器，它们通常称为解析器生成器。你只需要提供语法——词汇与句法规则
——它就能生成一个可以工作的解析器。创建解析器需要对解析器有深入的了解，并且手动创建一个优
化的解析器并不容易，所以解析器生成工具很有用。
Webkit使用两款知名的解析器生成工具：Flex用于创建词法分析器，Bison用于创建解析器 (你也许会看
到它们以Lex和Yacc的名字存在)。Flex的输入文件是符号的正则表达式定义，Bison的输入文件是ＢＮＦ
格式的句法定义。
HTML解析器
ＨＴＭＬ解析器的工作是解析ＨＴＭＬ标记到解析树。
HTML语法定义
ＨＴＭＬ的词汇与句法定义在w3c组织创建的规范中。当前版本是HTML4，HTML5的工作正在进行中。
不是上下文无关语法
在对解析器的介绍中看到，语法可以用类似ＢＮＦ的格式规范地定义。不幸的是所有常规解析器的讨论
都不适用于ＨＴＭＬ（我提及它们并不是为了娱乐，它们可以用于解析CSS和JavaScript）。HTML无法用
解析器所需的上下文无关的语法来定义。过去HTML格式规范由DTD (Document Type Definition)来定义
，但它不是一个上下文无关语法。
HTML与XML相当接近。XML有许多可用的解析器。HTML还有一个XML变种叫XHTML，那么它们主要区别在哪
里呢？区别在于HTML应用更加”宽容”，它容许你漏掉一些开始或结束标签等。它整个是一个“软”句
法，不像XML那样严格死板。 总的来说这一看似细微的差别造成了两个不同的世界。一方面这使得HTML
很流行，因为它包容你的错误，使网页作者的生活变得轻松。另一方面，它使编写语法格式变得困难。
所以综合来说，ＨＴＭＬ解析并不简单，现成的上下文相关解析器搞不定，ＸＭＬ解析器也不行。
HTML DTD
HTML的定义使用DTD文件。这种格式用来定义SGML族语言，它包含对所有允许的元素的定义，包括它们的
属性和层级关系。如我们前面所说，HTML DTD构不成上下文无关语法。
DTD有几种不同类型。严格模式完全尊守规范，但其它模式为了向前兼容可能包含对早期浏览器所用标签
的支持。当前的严格模式ＤＴＤ：http://www.w3.org/TR/html4/strict.dtd
DOM
解析器输出的树是由ＤＯＭ元素和属性节点组成的。DOM的全称为：Document Object Model。它是ＨＴ
ＭＬ文档的对象化描述，也是ＨＴＭＬ元素与外界（如Javascript）的接口。
ＤＯＭ与标签几乎有着一一对应的关系，如下面的标签
Hello World
会被转换成如的ＤＯＭ树：
Figure 8: DOM tree of the example markup
与HTML一样，DOM规范也由w3c组织制订。参考：http://www.w3.org/DOM/DOMTR. 这是一个操作文档的通
用规范。有一个专门的模块定义HTML特有元素: http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-
20030109/idl-definitions.html.
当我们说树中包含ＤＯＭ节点时，意思就是这个树是由实现了ＤＯＭ接口的元素组成。这些实现包含了
其它一些浏览器内部所需的属性。
解析算法
如我们前面看到的，HTML无法使用自上而下或自下而上的解析器来解析。
理由如下：
语言的宽容特点
浏览器需要对无效HTML提供容错性的事实。
解析过程的反复。通常解析过程中源码不会变化。但在HTML中，script标签包含”document.write”时
可以添加内容，即解析过程实际上还会改变源码。
浏览器创建了自己的解析器来解析HTML文档。
HTML5规范里对解析算法有具体的说明，解析由两部分组成：分词与构建树。
分词属于词法分析部分，它把输入解析成符号序列。在HTML中符号就是开始标签，结束标签，属性名称
和属生值。
分词器识别这些符号并将其送入树构建者，然后继续分析处理下一个符号，直到输入结束。
图 6: HTML解析流程 (源自HTML5规范)
分词算法
算法的输出是HTML符号。算法可以用状态机来描述。 每一个状态从输入流中消费一个或多个字符，并根
据它们更新下一状态。决策受当前符号状态和树的构建状态影响。这意味着同样的字符可能会产生不同
的结果，取决于当前的状态。算法太复杂，我们用一个例子来看看它的原理。
基础示例，分析下面的标签:
Hello world
初始状态是”Data state”，当遇到”<“时状态改为“Tag open state”。吃掉”a-z”字符组成的符
号后产生了”Start tag token”，状态变更为“Tag name state”。我们一直保持此状态，直到遇到”
>”。每个字符都被追加到新的符号名上。在我们的例子中，解出的符号就是”html”。
当碰到”>”时，当前符号完成，状态改回“Data state”。””标签将会以同样的方式处理。现
在”html”与”body”标签都完成了，我们回到“Data state”状态。吃掉”H”（”Hello world”第
一个字母）时会产生一个字符符号，直到碰到””的”<“符号，我们就完成了一个字符符
号”Hello world”。
现在我们回到“Tag open state”状态。吃掉下一个输入”/”时会产生一个”end tag token”并变更
为“Tag name state”状态。同样，此状态保持到我们碰到”>”时。这时新标签符号完成，我们又回到
“Data state”。同样”