浏览器二三事

浏览器的高层结构

• 主要组件图

关于解析、语法和翻译

• 解析： 是呈现引擎最重要的环节。解析的目的就是为了把文档转换成有意义的结构，并且可以让代码理解和使用。通常解析后的结果代表了文档结构的节点数，称为解析树或者语法树

• 语法： 是解析的时候遵循文档的语法规则或者编写文档所用的语言、格式等的基础

• 解析过程： 词法分析器和语法分析器

  • 词法分析器讲输入内容分成一个个有效标记（会分离无效字符：空格、换行等）
  • 解释器按照语言的语法规则分析文档的结构从而构建解析树
  • 解析是一个迭代的过程

• 翻译： 将输入的文档转换成另一种格式：如将源码解析成解析树，然后解析树翻译成机器代码文档

解释器

最基本的有两种类型的解释器

• 自上而下解释器： 从语法高层结构出发，尝试从中找到匹配的结构
• 自下而上解释器： 从底层规则出发，逐步转换为语法规则。自下而上的解释器又叫归位解释器。

关于自动生成解释器

• 有一些工具可以帮我们生成解释器，这些工具叫解释器生成器，只需要我们提供词汇和语法规则，他就会生成对应的解释器生成器。

• webkit使用了两种非常有名的解释器生成器 Flex 和 Bison(或者叫：Lex、Yacc别名)

  • Flex的输入时包含标记的正则表达式定义的文件
  • Bison的输入采用的是 BNF 格式的语法规则

HTML解释器

• 实际上 HTML 并不符合与上下文无关（即不符合 BNF 的格式语法）所以，基本上常规的解释器都无法使用于 HTML （但是他们可以解析 css 和 js）

• 有一种可以定义 HTML 的正规格式叫 DTD (Document Type Definition, 文档类型)， 但它不是与上下文无关语法

• 浏览器无法用自上而下或自下而上的解析器进行解析 HTML 的原因：

  • 语言的宽容本质
  • 浏览器历来对一些常见的无效 HTML 包容的态度
  • 解析的过程要不断的反复，所以原内容在解析的过程中通常是不会改变的，但在 HTML 中，脚本如果包含 document.write 就会添加额外的标记，这样解析的输入内容实际上就发生了变化