解html语言,解析-HTML 解析器

4-解析-HTML 解析器

因为 HTML 语言在语法层面并有那么严格的语法规则,导致常规的解析器并不能解析HTML文档,对应的解决方案让浏览器厂商自定义 HTML 解析器。那么,让我们一起梳理一下 HTML 解析器到底是什么吧~

输入(语法)

因为 HTML 语法是由 W3C 组织创建的规范中进行定义的,而且语法格式是由 DTD (Document Type Definition)定义的,该格式中定义了语言中允许的元素、属性和层次结构,适用一切的 SGML (Standard Gerneralized Markup Languge)族的语言。为了在发展的进程中向后兼容老版本的内容,DTD 存在两种模式,严格模式完全遵守 HTML 规范,其他模式支持老的浏览器使用的编辑。

解析算法

因为 HTML 文档语法特性(包容性),以及在解析过程中存在脚本会改变 HTML 文档(如: document.write),导致无法使用自上而下或是自下而上的解析器进行解析。

04fe680c74c8de2847f7fe9a7c4c26ad.png

解析过程前半段是词法分析,也就是标记化(tokenization),整体算法的核心就是状态机的改变(就是解析过程中有一个标识当前状态应是解析到哪一个阶段了)。

677e482230cdfbf1ff18d45edaf98703.png

同时构建 DOM 树,也就是树构建(tree construction)过程,该过程就是我们在「解析-理论剖析」讲述的一样,将对应的标记去击中语法,然后添加到 DOM 树上。此过程中也有一个状态机去维护对应的阶段。

1ac155a38773a158660692f8ed040239.gif

最后 DOM 树是 HTML 文档的映射关系和存留 HTML 元素对外的接口(如: 对JS),每一个节点是由 DOM 元素和节点属性组成。看一个例子:

Hello World

example.png

复制代码

20d16f10dc8fa105344a7d1d64bc442e.png

解析完,进入交互阶段开始解析处于 'deferred mode' (that should be executed after the document is parsed)的脚本,执行完这些脚本后,文档状态为 complete,触发 load 事件。

因为解析器是浏览器厂商的自定义,而 HTML语法特性比较特殊,所以解析器要有相关的容错机制,而这机制并不是 HTML 规范中强制规定,而是浏览器发展过程中的产品(友商之间互抄好的地方呗),但是后期的 HTML 5 规范中有部分容错机制的要求(webkit 的 HTML 解析器就有这样的注释)。

上述只是描述到 HTML 文档的解析,那脚本和样式的解析顺序呢?

因为 web 的模型式同步的原因,如果遇见内部

毕竟突然中断 HTML 解析还是会影响页面展示的时间,那样我们需要规避不必要的因脚本而中断解析,那就是给

当有脚本在执行的过程中,会触发「预解析」,此时是其他线程继续解析文档,找到需要请求加载的资源,加载这部分资源(并行加载,提高整体速度)。预解析只解析外部文件(外部脚本、样式或图片),此过程不修改 DOM 树。

样式方面,因为解析样式并不会影响 DOM 树,所以不需要中断文档解析。但同时存在一个问题,当脚本获取样式信息时,但此时样式并没有加载就会报错。对应的解决手段就是阻塞脚本,但不用浏览器阻塞的阶段不同,firefox是当样式加载或解析的时候,会阻塞所有的脚本;而 webkit 是当脚本去访问那些确定会被为加载样式影响到的属性时,阻塞脚本。

以上是刚刚完成了 DOM 树的构建,那我们马上进入后续阶段咯~

下一篇文章

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值