浏览器渲染引擎&性能 之HTML解析器

前言

我们都知道浏览器在解析HTML文件时，首先会构建DOM树，然后会解析CSS文件，构建CSS规则树，最后根据DOM树和CSS规则树构建渲染树，等到渲染树构建完成之后，浏览器开始布局渲染树并将其绘制到屏幕，那么浏览器是怎么构建DOM树和CSS树呢？

本系列文章将带你从HTML解析器和CSS解析器内部进行分析，带你一步步了解整个构建过程。注：本文针对chrome浏览器而言，不同浏览器处理过程可能不用同。

1. DOM模型

DOM的全称是文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。DOM定义的是一组与平台、语言无关的接口，该接口允许编程语言动态访问和更改结构化文档。

 

DOM结构构成的基本要素是“节点”，而文档的DOM结构就是由层次化的节点组成。在DOM模型中，节点的概念很宽泛，整个文档（Document）就是一个节点，称为文档节点。HTML中的标记也是一种节点，称为元素(Element)节点，还有一些其他类型的节点，例如属性节点、Entity节点、ProcessingIntruction节点、注释节点等。众多的节点按照层次组织构成一个DOM树形结构。

下图的左边是一个HTML网页的源码，后边就是它的DOM树表示。

 

2. HTML解析器

HTML解析器的工作就是将网络或者本地磁盘获取的HTML网页和资源从字节流解析成DOM树结构，这一过程可以大致理解成下图所述的步骤：

WebKit中这一过程在图中被描述得很清楚：首先是字节流，经过解码之后是字符流，然后通过词法分析器解析成词语（Tokens），之后经过语法分析器构建成节点，最后这些节点被组件成一颗DOM树。在这个过程中，每一个环节都会调用对应的类去处理。

上图为WebKit在构建DOM时需要使用到的主要类，下面我们依次解释每个类的主要功能:

FrameLoader 类，是框中容器的加载类；

DocumentLoader类帮助加载HTML文档并从字节流到构建得DOM树；

DocumentWriter类是一个辅助类，它会创建DOM树的根节点;

HTMLDocument对象，同时还包含两个成员变量，一个用于文档的字符解码的类，另一个就是HTML解析器HTMLDocumentParser类；

HTMLDocumentParser类是一个管理类，其中包含用于词法分析器;

HTMLTokenizer类，负责安全检查的XSSAuditor，负责建立DOM树的;

HTMLTreeBuilder类，通过词语创建一个个节点对象，然后在借用HTMLConstructionSite类将节点对象构建成一个DOM树；

 

好了，现在我们知道每个类的主要功能，那么WebKit是如何利用它们来完成工作的呢？

 

当WebKit收到网络回复的字节流后，调用DocumentLoader类的“commitData”方法，然后DocumentWriter类会先创建一个根节点HTMLDocument对象，然后将数据输送到HTMLDocumentParser对象，然后进行词法分析，验证词语、创建节点、构建DOM树。

2.1 词法分析

首先检查该网页使用的编码格式，WebKit会使用相应的解码器来将字节流转换成特定格式的字符串。如果没有特殊的格式，词法分析器HTMLTokenizer类可以直接进行词法分析。简单来说，它就是一个状态机----输入的是字符串，输出的是一个个的词语，词法分析器的主要接口是“nextToken”函数，调用者只需要将字符串传入，然后就会得到一个词语，并对传入的字符串设置享有的信息，表示当前处理完的位置，如此循环。如果分析器遇到错误，则报告状态错误码。

2.2 验证词语

当词语生成之后，WebKit需要使用XSSAuditor来验证词语流，对于解析出来的这些词语，可能会阻碍某些内容的进一步执行，所以XSSAuditor类主要负责过滤这些被阻止的内容，只有通过的词语才会作后面的处理。

2.3 创建节点

经过词法分析器解释之后的词语随之被XSSAuditor过滤并且在没有被阻止之后，将被Webkit用来构建DOM节点。

2.4 构建DOM树

因为HTML文档的Tag标签是有开始和结束标记的，所以构建这一过程可以使用栈结构来帮忙。HTMLConstructionSite类中包含一个“HTMLElementStack”变量，它是一个保存元素节点的栈，其中的元素节点是当前有开始标记但是还没有结束标记的元素节点。想象一下HTML文档的特点，例如：

当解释到span标签元素的开始标记时，栈中的元素就是body、div和span，当遇到span的结束标记时，span出栈，span是div的子女；当遇到div的结束标记时，div出栈，表明div和它的子女都已经处理完毕，以此类推。

 

经过以上操作之后，浏览器就构建出了一个DOM树，接下来将构建CSS渲染树，这个过程主要使用到CSS解析器，后续我还会发布CSS解析器相关文章，敬请期待！