续上文。构建渲染树后，浏览器开始布局。这意味着浏览器会给每个节点正确的坐标，使它们出现在它们应该出现的地方。接下来就是绘制了，浏览器会遍历渲染树，每个节点都会被UI后端层绘制出来。重要的是要注意，这整个过程是渐进的。为了更好的用户体验，渲染引擎会尽快将内容解析到屏幕上。它不会等到html完全解析后才开始创建和布局渲染树。一旦部分内容解析完成，就会立即绘制到页面上，浏览器在这个过程中可能还在请求剩下的内容。主流程示例图3：Webkit主流程图4：Mozilla的Gecko渲染引擎主流程从图3和图4可以看出，虽然Webkit和Gecko的名词略有不同，但主流程基本相同。Gecko将可见格式元素树称为“框架”树。每个元素都是一个框架。Webkit将每个渲染对象组成的树称为渲染树。对于每一个元素的定位，Webkit称为layout，Gecko称为reflow。Webkit调用使用dom节点和样式信息构建rendertree的过程作为attachment，Gecko在html和dom树之间加了一层。这一层叫做内容接收者，相当于一个制造dom元素的工厂。下面讨论该过程中的各个阶段。解析解析是渲染引擎执行过程中非常重要的一部分，我们将对其进行深入探讨。我们先简单解释一下什么是解析。解析文档意味着将内容翻译成某种编码可以理解和使用的结构。解析的结果通常是一个能够表达文档结构的节点树。它被称为解析树或语法树。例如，解析表达式“2+3-1”应该返回以下树：图5：数学表达式的树结构语法解析过程取决于文档遵循的语法规则——文档的语言或格式。每种可解析格式都必须有一个由词汇和语法规则组成的特定语法，称为上下文无关语法。人类语言没有这个特性，因此不能用常规的语法分析技术进行语法分析。解析器——词法分析器解析过程可以分为两个过程——词法分析和句法分析。词法分析是将输入解释为符号的过程，而符号是构成语言的基本有效单位。它相当于字典中的所有单词，用来组成和表达人类的语言。句法分析是指语法规则的应用。通常，解析器将工作分为两个组件——词法分析器（有时称为标记解析器）负责将输入分解为合法符号，解析器负责根据语法规则分析文档的结构，并构建一个解析树。词法分析器知道如何跳过多余的字符，如空格或换行符。图6：从源文档到解析树的解析过程是迭代的。解析器将从词法分析器中获取一个新符号，并尝试将其与其中一个语法规则进行匹配。如果匹配到一条规则，则该符号对应的节点将被添加到解析树中，解析器将继续进行下一个符号。如果没有匹配该符号的规则，则解析器会在内部保存该符号，并继续取下一个符号，直到有匹配所有内部存储符号的文法规则为止。如果最后没有找到匹配的规则，解析器就会抛出异常。这意味着文档无效或有语法错误。转换过程通常，解析树不是最终结果。在转换过程中经常使用解析，用于将输入文档转换为另一种格式。编译过程就是一个例子。当编译器将源代码编译成机器码时，首先要做的是将其解析成解析树，然后将解析树转换成机器码文档。图7：编译流解析示例在图5中，我们创建了一个基于数学表达式的解析树。让我们尝试定义一个简单的数学语言，然后看看解析过程。词汇：我们的语言包括整数、加号和减号。语法：当表达式、术语和运算符可以包含多个表达式时我们语言的基本构成两个术语（term）由运算符连接，形成一个表达式或者一个表达式我们来分析一下输入“2+3-1”之后会发生什么。匹配规则的第一个子串是“2”，这是根据规则5的术语。匹配的第二个规则是“2+3”，它匹配第三个语法规则。下一场比赛将在此输入的末尾进行。“2+3-1”是一个表达式，因为我们已经知道“2+3”是一个项（term），后面的“-”是一个运算符，再后面的“1”是一个整数，也就是term，匹配规则3。而“2++”不会匹配任何语法，因此它是非法输入。
