浏览器是怎样工作的二:渲染引擎 HTML解析

  渲染引擎的职责是渲染,也就是把请求的内容显示到浏览器屏幕上。

  默认情况下渲染引擎可以显示HTML,XML文档以及图片。 通过插件(浏览器扩展)它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在一个专门的章节讨论插件与扩展。在这一节我们将专注渲染引擎的主要用途显示用CSS格式化的HTML与图片。

  Webkit 是一个开源的渲染引擎,它源自Linux平台上的一个引擎,经过Apple公司的修改可以支持Mac与Windows平台。更多信息可以参考:。

  渲染引擎开始于从网络层获取请求内容,一般是不超过8K的数据块。接下来就是渲染引擎的基本工作流程:

  图 2:渲染引擎的基本工作流程(解析HTML构建DOM树,渲染树构建,渲染树布局,绘制渲染树)。

  渲染引擎会解析HTML文档并把标签转换成内容树中的DOM节点。它会解析style元素和外部文件中的样式数据。样式数据和HTML中的显示控制将共同用来创建另一棵树渲染树。

  渲染树包含带有颜色,尺寸等显示属性的矩形。这些矩形的顺序与显示顺序一致。

  渲染树构建完成后就是布局处理,也就是确定每个节点在屏幕上的确切显示位置。 下一个步骤是绘制 遍历渲染树并用UI后端层将每一个节点绘制出来。

  一定要理解这是一个缓慢的过程,为了更好的用户体验,渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会 在处理后续内容的同时把处理过的局部内容先展示出来。

  从图3和图4中可以看出,尽管Webkit与Gecko使用略微不同的术语,这个过程还是基本相同的。

  Gecko 里把格式化好的可视元素称做帧树(Frame tree)。每个元素就是一个帧(frame)。 Webkit 则使用渲染树这个术语,渲染树由渲染对象组成。Webkit 里使用layout表示元素的布局,Gecko则称为Reflow。Webkit使用Attachment来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层 ,称作content sink,是创建DOM对象的工厂。我们会讨论流程中的每一部分。

  因为解析是渲染引擎中一个很重要的处理,我们会讲的略深入一些。让我们从一个小的解析介绍开始。

  解析一个文档意味着把它翻译成有意义的结构以供代码使用。解析的结果通常是一个表征文档的由节点组成的树,称为解析树或句法树。

  解析是基于文档所遵循的语法规则书写所用的语言或格式来进行的。每一种可以解析的格式必须由确定的语法与词汇组成。这被称之为上下文无关语法。 人类语言并非此种语言,所以不能用常规的解析技术来解析。

  词法分析负责把输入切分成符号序列,符号是语言的词汇由该语言所有合法的单词组成。

  解析器通常把工作分给两个组件分词程序负责把输入切分成合法符号序列,解析程序负责按照句法规则分析文档结构和构建句法树。词法分析器知道如何过滤像空格,换行之类的无关字符。

  解析过程是交互式的。解析器通常会从词法分析器获取新符号并尝试匹配句法规则。如果匹配成功,就在句法树上创建相应的节点,并继续从词法分析器获取下一个符号。如果没有匹配的规则,解析器会内部保存这个符号,并继续从词法分析器获取符号,直到内部保存的所有符号能够成功匹配一个规则。如果最终无法匹配,解析器会抛出异常。这意味着文档无效,含有句法错误。

  多数情况下解析树并非最终结果。解析经常是为了从输入文档转换成另外一种格式。比如编译器要把源码编译成机器码,会首先解析成解析树,再把解析树转换成机器码。

相关阅读