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

helloworldcoding 发布于2019-08-19 18:17 / 2978人阅读

摘要：从字节流到字符流使用各种各样的编辑器编写文档时，使用的编码格式是不一样的，如，等。解码这一步骤就发生在，从字节流到字符流这一过程中。到此，完成了从字节流到树的过程，。

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树。

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

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

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

当然这里假设只有HTML。

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

云服务器 GPU云服务器站在云端的saas html 头部一样对大数据的认识 python的认识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79419.html

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

摘要：从字节流到字符流使用各种各样的编辑器编写文档时，使用的编码格式是不一样的，如，等。解码这一步骤就发生在，从字节流到字符流这一过程中。到此，完成了从字节流到树的过程，。 TA就是，HTML解释器从WebKit内核的HTML解释器的角度来看HTML。了解HTML文档是如何从字节流，一步步到DOM树的。理解这个过程，很多前端开发时一知半解的问题都能够很好地理解了。总览解释过程首先HTM...

余学文 2019-08-02 15:54 评论0 收藏0
精读《JS 引擎基础之 Shapes and Inline Caches》

摘要：概述的解释器优化器代码可能在字节码或者优化后的机器码状态下执行，而生成字节码速度很快，而生成机器码就要慢一些了。比如有一个函数，从获取值引擎生成的字节码结构是这样的指令是获取参数指向的对象，并存储在，第二步则返回。 1 引言本期精读的文章是：JS 引擎基础之 Shapes and Inline Caches 一起了解下 JS 引擎是如何运作的吧！ JS 的运作机制可以分为 AST 分...

Tecode 2019-08-22 18:15 评论0 收藏0
PHP 微服务之【分布式事务】阅读提示

摘要：前几天写一篇，一种新思路实现分布式事务的文章。写个分布式事务就有人开始喷了事务提交了，怎么回滚都知道怎么回滚。前几天写一篇，一种新思路实现分布式事务的文章。https://segmentfault.com/a/11... 部分死脑筋就开始，各种不解。看反馈确实有点搞笑。不要一听到 session 就觉得是 $_SEESION不要别人换个名字 token 或者 jwt 就不认识...

canger 2019-07-01 12:49 评论0 收藏0