站在ta的角度来看html,认识会大不一样

homehtml      2022-02-13     582

关键词:

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

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


对“认识”的认识

...的。之所以这样说,是因为人的一切认识的结论都来自于角度。而角度总是有所限定的。限定的角度必然带来片面的 查看详情

换一个角度看问题,不一样的你

我最近发现一个问题,很多人其实非常优秀的,但是他们总会无缘无故的抱怨说,大家都不喜欢我,讨厌我,不把我正眼看,我发现这是一个非常奇特的事情,怎么说呢?这要从几个方面看待,下面我就来谈谈首先,我们认识一... 查看详情

从jvm的角度来看单例模式

...现在对java代码可以说是有了全新的认识。今天就从jvm的角度来看一看以前自以为很了解的单例模式。了解单例模式的人都知道,单例模式有两种:“饿汉模式”和“懒汉模式”。引用一段网上对这两种模式的介绍:“饿汉模式... 查看详情

ta还没有分享呢,过段时间再来看看吧~解决办法

自己摸索出来的。只能查看以前分享的奥。 找到要查看用户的id号  利用特百度搜索工具实现检索http://www.tebaidu.com/user-3056331768-1.html将红字部分替换为刚才复制的uk值。回车即可。    查看详情

项目实战产品设计

...了很多。不足:1、没有全心全意为人民服务2、缺乏站在用户角度思考问题3、缺乏激烈的思维碰撞4、缺乏经验导致绘制原型图时间过长收获:1、全心全意为人民服务“如果你设计的软件,猪不能使,你就是猪”&#... 查看详情

从jvm的角度来看java的多线程

最近在学习jvm,发现随着对虚拟机底层的了解,对java的多线程也有了全新的认识,原来一个小小的synchronized关键字里别有洞天。决定把自己关于java多线程的所学整理成一篇文章,从最基础的为什么使用多线程,一直深入讲解到j... 查看详情

有你认识的那个ta吗?

前言写公众号2年多了,认识了很多全国各地的读者朋友,也认识了不少热爱分享、一直在写作的公众号作者。下面的这4位,有你们认识的吗?8号线攻城狮公众号『8号线攻城狮』号主王工,嵌入式硬件工程师,目前主要从事嵌... 查看详情

html笔记2

1.开发网页的三种技术Html--->负责网页的结构Css--->站在美学的角度进行美化JavaScript--->站在用户体验的角度设计网页的交互效果Node.js-->JavaScript能够前后端通吃2.Html2.1html是什么?超文本标记语言(HyperTextMarkupLanguage)文本:t... 查看详情

html像datatables一样的角度智能表(代码片段)

查看详情

sql数据库语言基础之sqlserver视图的创建修改与视图数据的增删改查

...把table换成view)​​一、认识视图1、视图的理解从用户角度来看,一个视图是从一个特定的角度来查看数据库中的数据。从数据库系统内部来看,一个视图是由SELECT语句组成的查询定义的虚拟表。从数据库系统内部来看,视图... 查看详情

站在0基础的角度--看网络

[1]TCP/IP ----------模型: TCP/IP 模型-5层5---应用层4---传输层:TCP3---网络层:IP2---逻辑链路层1---物理层 --------------------------------------------------------------TCP/IP 模型4层4---应用层3---传输层:TCP2-- 查看详情

对堆栈的认识

...思是我理解什么是栈,但是它们到底是什么,在哪儿呢(站在实际的计算机物理内存的角度上看)?1、在通常情况下由操作系统(OS)和语言的运行时(runtime)控制吗?2、它们的作用范围是什么?3、它们的大小由什么决 查看详情

简单地认识一下html

简单复盘一下HTML。1、HTML什么是HTML?HTML是HyperTextMarkupLanguage的简写,译成中文是「超文本标记语言」。顾名思义,超文本,就是不止于文本,视频、音频、图片等等都可以,说到底就是一种特殊的文档。HTML构建了一个网页的基... 查看详情

mysql简单介绍——换个角度认识mysql

参考技术A1、InnoDB存储引擎Mysql版本>=5.5默认的存储引擎,MySQL推荐使用的存储引擎。支持事务,行级锁定,外键约束。事务安全型存储引擎。更加注重数据的完整性和安全性。存储格式:数据,索引集中存储,存储于同一个表空... 查看详情

对堆栈的认识

...思是我理解什么是栈,可是它们究竟是什么,在哪儿呢(站在实际的计算机物理内存的角度上看)?1、在通常情况下由操作系统(OS)和语言的执行时(runtime)控制吗?2、它们的作用范围是什么?3、它们的大小由什 查看详情

在 Swift 中,从技术角度来看,为啥编译器会关心协议是不是只能用作通用约束?

】在Swift中,从技术角度来看,为啥编译器会关心协议是不是只能用作通用约束?【英文标题】:InSwift,fromatechnicalstandpoint,whydoesthecompilercareifaprotocolcanonlybeusedasagenericconstraint?在Swift中,从技术角度来看,为什么编译器会关心协议... 查看详情

面向对象-类与对象(代码片段)

...各样的实际存在的物体,然后随着人类文明的发展,人类站在不同的角度总结出了不同的种类,如人类、动物类、植物类等概念也就说,对象是具体的存在,而类仅仅只是一个概念,并不真实存在在程序中:务必保证先定义类,... 查看详情

38.认识dom及获取元素

...nbsp;Object  Model 文档对象模型(操纵html行内css)站在js角度:html标签叫做节点 DOM总共12种节点:先了解:  nodeType获取节点数字类型:               nodeName获取标签的名字:   ... 查看详情