浏览器是怎样工作的（二）：渲染引擎，HTML解析.docxVIP

扫瞄器是怎样工作的（二）：渲染引擎，HTML解析 渲染引擎的职责是……渲染，也就是把恳求的内容显示到扫瞄器屏幕上。 默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（扫瞄器扩展）它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在一个特地的章节争辩插件与扩展。在这一节我们将专注渲染引擎的次要用途——显示用CSS格式化的HTML与图 片。 各种渲染引擎 我们提到的Firefox, Safari两种扫瞄器构建于两种渲染引擎之上：Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit。 Webkit 是一个开源的渲染引擎，它源自Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与Windows平台。更多信息可以参考：?/?。 次要流程 渲染引擎开头于从网络层猎取恳求内容，一般是不超过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中我们构建了一个数学表达式解析树。让我们来试着定义一个简约的数学言语并看看解析是如何进行的。 词汇：我们的言语可以包含整数，加号和减号。 句法： 句法块由表达式，术语及操作符组成。 我们的言语可以包含任意