浏览器渲染深入理解一：解析器与DTD

都是本人理解，笔记大致概念，不详细也并非完全正确，所以仅供参考。

参考文档：浏览器的工作原理：现代网络浏览器幕后揭秘 - HTML5 Rocks

---

解析器

众所周知，浏览器渲染页面的过程是以下步骤：

• 处理 html 并构建 dom 树。
• 处理 css 并构建 cssom 树。
• 将 dom 与 cssom 合并成一个 render 树。
• 根据 render 树来进行布局，计算每个节点的坐标信息。
• 将各个节点的信息发送给 GPU，由 GPU 绘制到屏幕上。

其中，因为 js 会修改 dom 和 style ，所以以上过程会被重复执行。

所以这篇文章简单说一下解析器是如何将 html/css 构建成 dom/cssom 的。

常规解析器

还记得在《JavaScript 笔记七：DOM、BOM、AST抽象语法树》这一章简单说过AST抽象语法树，可以理解符合规则的内容都可以被解析成对象的形式进行具体操作，而常规解析器也是类似，它的工作有以下两个过程：

• 词法分析
• 语法分析

词法分析是将输入内容分割成大量标记的过程，而标记则是语言中的词汇，即构成内容的单位。在人类语言中可以理解为单词。

而解析是以文档所遵循的语法规则为基础，所有可以解析的格式都必须对应确定的词汇和语法，这称为与上下文无关的语法。人类语言并不属于这样的语言，因此无法用常规解析器进行解析。

举一下例子：2 + 3 - 1

其中，1、2、3 属于整数，+、- 属于运算符，2+3 属于表达式，他们都是属于词法中的某一个项。

表达式则需要满足语法：一个项连接运算符，再连接一个项

所以解析之后，结构如下：

解析关系

所以基本解析器，就是根据语法去匹配词法，进行相应解析。

HTML解析器

而 HTML 的语法是非与上下文无关的语法，因为 HTML 的处理太过宽容，它允许省略某些隐式添加的标记，有时还能省略一些起始或者结束标记等等，所以 HTML 整体来看是一种“软性”的语法。

所以定义 HTML 的正规格式为：DTD，也就是下面要讲的。

---

DTD

在以前 html4的时代，可以在文档头部看到诸如此类的定义：

实际上，DTD 并非 HTML的专属，实际上，DTD 是 SGML（标准通用标记语言）的解析器，所以 DTD 格式可用于定义 SGML 族的语言。

而 HTML 和 XML 派生于SGML：

• XML是它的一个子集
• HTML是它的一个应用

另外还有XHTML，都是派生于 SGML。

所以以前在文档头加一行这个代码，是为了告诉浏览器以 DTD 的格式进行解析文档，而在 HTML5 不基于 SGML ，所以它没有 DTD，但是为了向后兼容，所以 HTML5 需要添加

那么 HTML5 基于什么，又用什么格式进行解析？

实际上，没有更合适的答案来告诉你 HTML5 基于什么格式，用维基百科的话来说：

虽然它的灵感来自于 SGML，但在实践中，它实际上只与 SGML 在语法上有少许相似之处。由于 HTML5 不再正式基于SGML，DOCTYPE 不再服务于此目的，因此不再需要引用 DTD 。

可以理解为 HTML5 是模仿 SGML 的一个新的格式，它更完善、优美和强大。

而 HTML5 由于模仿 SGML 所以亦不能使用常规解析器，不基于 SGML 也不再引用 DTD，所以就创建了自定义的解析器来解析 HTML5，HTML5 解析算法参考。