0

0

站在TA的角度来看HTML,认识会大不一样_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-21 08:49:02

|

1386人浏览过

|

来源于php中文网

原创

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中使用一个状态机来完成,总之就是输入字符串,输出一个个词语。在自然语言处理中,也有类似的过程,叫分词。

Kubit.ai
Kubit.ai

一个AI驱动的产品分析平台,为产品和数据团队构建

下载

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技术内幕》

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

63

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

73

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

20

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

4

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

49

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

11

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Firebug入门教程
Firebug入门教程

共7课时 | 2.9万人学习

新的PHP案例(思考者)1
新的PHP案例(思考者)1

共0课时 | 0.8万人学习

Swoole系列-从0到1-新手进阶
Swoole系列-从0到1-新手进阶

共29课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号