站在TA的角度来看HTML，认识会大不一样

TA就是，HTML解释器

从WebKit内核的HTML解释器的角度来看HTML。了解HTML文档是如何从字节流，一步步到DOM树的。理解这个过程，很多前端开发时一知半解的问题都能够很好地理解了。

总览解释过程

首先HTML解释器接受到的是字节流（Bytes），经过解码之后是字符流（Characters），然后通过词法分析器切成词语（Tokens），之后经过语法分析器构建成节点（Node），最后这些节点被组建成一棵DOM树（Document Object Model Tree）。

几乎所有的语言都有类似的一个“编译”过程，我们可以不关心每个流程中具体代码的细节，但每个过程发生了什么还是要了解的。

从字节流（Bytes）到字符流（Characters）

使用各种各样的编辑器编写HTML文档时，使用的编码格式是不一样的，如UTF-8，GBK等。这些编辑器的保存实际上就是把字符流使用编码格式保存成字节流文件的过程。而这些使用的编码格式之所以要在HTML文档内部注明，就是为了浏览器的HTML解释器能够正确地进行解码。

解码这一步骤就发生在，从字节流（Bytes）到字符流（Characters）这一过程中。

如果解释器在HTML网页中找到了设置的编码格式，WebKit会使用相应的解码器将字节流转换成特定格式的字符串。如果没有，则会使用默认的（UTF－8）来解码。

所以，您知道如何解决网页乱码问题了吧，在网络爬虫中，经常涉及网页乱码问题哦。

从字符流（Characters）到词语（Tokens）

这个过程一般叫词法分析，在WebKit中使用一个状态机来完成，总之就是输入字符串，输出一个个词语。在自然语言处理中，也有类似的过程，叫分词。

WebKit定义了6中词语类别，DOCTYPE，StartTag，EndTag，Comment，Character，EndOfFile。
分词之后，WebKit还会做一些安全处理。

从词语（Tokens）到节点（Node）

Webkit接下来会对安全的词语，更具词语的6类别，分别调用类似processXXX这样的不同的函数，来将词语处理成节点。

从节点（Node）到DOM树（Document Object Model Tree）

类比其他语言，会根据词法分析的结果构建语法树，而HTML则构建的是DOM树。

扫描二维码关注公众号，回复： 10506830 查看本文章

因为HTML文档的Tag标签是有开始和结束标记的，类似括号匹配，不难想象可以利用数据结构栈来实现DOM树的构建。有兴趣可以去了解下，如何编程实现计算任意的1+3*(5-3)这类表达式......

另外，当我们忘记书写一个Tag的结束标记时，在构建DOM树的过程中，会利用栈的特性帮我们自动补上。

到此，完成了从字节流到DOM树的过程，^_^。

当然这里假设只有HTML。

参考书籍：《WebKit技术内幕》

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hihkhi1h0kj