浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<h1>HelloWorld</h1>
<div>
<div>
<p>picture:</p>
<img src="example.png"/>
</div>
<div>
<p>A paragraph of explanatory text...</p>
</div>
</div>
</body>
</html>

  

豌豆资源搜索网站 https://55wd.com

浏览器解析HTML文档,在<head>中发现了<script>和<link>引入文件,于是向服务器请求文件,在请求和下载文件过程中将继续向下解析HTML,当引入文件下载完成后会通知浏览器回头来解析css和script文件。

如果浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器同样不会等到图片下载完,而是继续渲染后面的代码;

现在进入正题,讲讲自己对解析HTML文档构建DOM树的理解:

此过程可分为两个主要模块构成,即

  • 标签解析
  • DOM树构建

1. 标签解析

这部分完成从HTML字符串中解析出标签的功能。主要使用标记化算法。

标记化算法的输入结果是HTML标记,使用状态机表示。状态机一共有4个状态:数据状态(Data)、标记打开状态(Tag open)、标记名称状态(Tag name)、关闭标记打开状态(Close tag open state)。

初始状态是数据状态。

当标记是处于数据状态时,

1)遇到字符<时,状态更改为“标记打开状态”:

a. 接收一个a-z字符会创建“起始标记”,状态更改为“标记名称状态”,并保持到接收>字符。此期间的字符串会形成一个新的标记名称。接收到>标记后,将当前的新标记发送给树构造器,状态改回“数据状态”

b. 接收下一个输入字符/时,会创建关闭标记打开状态,并更改为“标记名称状态”。直到接收>字符,将当前的新标记发送给树构造器,并改回“数据状态”。

2)遇到a-z字符时,会将每个字符创建成字符标记,并发送给树构造器。

2. DOM树构建

当标签解析器解析出标签后会发送到DOM树构建器,我们可以认为DOM树构建器主要有以下两部分组成:

  • DOM树
  • 一个存放标签名的栈

用如下代码演示生成DOM树的过程:

<html>
<body>
<h1>HelloWorld</h1>
<div>
<div>
<p>picture:</p>
<img src="example.png"/>
</div>
<div>
<p>A paragraph of explanatory text...</p>
</div>
</div>
</body>
</html>
<span><span class="tag"></span></span>

  

首先树构建器接收到标签解析器发来的起始标签名后,会加入到栈中,图1是解析到<h1>标签的栈中压入的内容,共有<html><body><h1>三个标签,此时还未向DOM树中添加任何结点(图中黑色实线框代表开始标签,红色虚线框代表结束标签,结束标签不会入栈)。

继续向下解析,接收到一个</h1>结束标签,此时查询栈顶元素,如果和传入的结束标签属于同种类型的p标签(如图2),则将栈顶元素弹出,向DOM树中加入此节点,然后继续向下解析(如图3)。

如果遇到的是没有封闭标签的元素如<img/>,则直接加入DOM树中即可,无需入栈。

依次向下解析,当栈为空,即<html>根节点也加入到DOM树中,DOM树构建完毕。

这里需要指出的是,当某个元素缺失结束标签时,假如上述代码中第一个<div>标签缺失了</div>结束标签,即:

<html>
<body>
<h1>HelloWorld</h1>
<div>
<div>
<p>picture:</p>
<img src="example.png"/>
</div>
<div>
<p>A paragraph of explanatory text...</p>
</div> </body>
</html>

那么,此时的栈如图4所示。即此时传来的结束标签是</body>,而栈顶元素是<div>,两者不是同一种标签,说明div缺少了结束标签,这种情况也将栈顶<div>元素弹出,加入到DOM树中。相当于给<div>补了一个</div>结束标签。

HTML文档解析和DOM树的构建的更多相关文章

  1. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  2. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  3. iOS网络编程笔记——XML文档解析

    今天利用多余时间研究了一下XML文档解析,虽然现在移动端使用的数据格式基本为JSON格式,但是XML格式毕竟多年来一直在各种计算机语言之间使用,是一种老牌的经典的灵活的数据交换格式.所以我认为还是很有 ...

  4. Android XML文档解析(一)——SAX解析

    ---------------------------------------------------------------------------------------------------- ...

  5. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  6. ios-XML文档解析之SAX解析

    首先SAX解析xml *xml文档的格式特点是节点,大体思路是把每个最小的子节点作为对象的属性,每个最小子节点的'父'节点作为对象,将节点转化为对象,输出. 每个节点都是成对存在的,有开始有结束.有始 ...

  7. jsoup -- xml文档解析

    jsoup -- xml文档解析 修改 https://jsoup.org/cookbook/modifying-data/set-attributes https://jsoup.org/cookb ...

  8. (二)发布第一个WebService服务与DSWL文档解析

    1. 编写接口 package service; import javax.jws.WebService; /** * 第一个webservice服务, * @WebService注解表示这是一个we ...

  9. 读取EXCEL文档解析工具类

    package test;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException ...

随机推荐

  1. Java实现空瓶换汽水

    1 空瓶换汽水 浪费可耻,节约光荣.饮料店节日搞活动:不用付费,用3个某饮料的空瓶就可以换一瓶该饮料.刚好小明前两天买了2瓶该饮料喝完了,瓶子还在.他耍了个小聪明,向老板借了一个空瓶,凑成3个,换了一 ...

  2. 关于C#委托三种调用的分享

    一.同步调用 1.同步调用会按照代码顺序来执行2.同步调用会阻塞线程,如果是要调用一项繁重的工作(如大量IO操作),可能会让程序停顿很长时间,造成糟糕的用户体验,这时候异步调用就很有必要了. 举个栗子 ...

  3. docker-compose mysql和node连接认证mongo问题

    前言 最近,想部署一个自己的项目,鉴于自己的服务器是VPS(虚拟主机),配置也不够,就想到了用 docker 直接部署好了,这样既方便部署也方便不用的时候卸载或更新 然后本地搭建了环境,踩了一些坑,在 ...

  4. Jmeter用beanshell将相应中的参数写入到本地文件中

    实现效果: 将每次请求的指定参数写入到本地csv文件中. 实际场景:将登录请求中,服务器返回的token值获取并写入到本地csv文件中,供其他接口调用.这样在压测单接口时,不需要再进行登录,避免压测单 ...

  5. [C#.NET 拾遗补漏]02:数组的几个小知识

    阅读本文大概需要 1.5 分钟. 数组本身相对来说比较简单,能想到的可写的东西不多.但还是有一些知识点值得总结和知晓一  下.有的知识点,知不知道不重要,工作中用的时候搜索一下就可以了,毕竟实现一个功 ...

  6. 异步函数async await在wpf都做了什么?

    首先我们来看一段控制台应用代码: class Program { static async Task Main(string[] args) { System.Console.WriteLine($& ...

  7. 关于Java优质代码的那些事

    以前别人告诉我,代码都是粘贴复制,然后写多了,就有了自己的思想,然后1,2年过去了,我的代码质量并没有什么提高,问了一些博客园里的前辈,前辈们都是语重心长的说:"少年,多看书呀!" ...

  8. IE6 中png背景透明的最好方法

    应用方式:(网站尾部加上如下代码) <!--[if IE 6]> <script src="js/DDPngMin.js"></script> ...

  9. 安装 KubeSphere DevOps 系统

    1.  安装KubeSphere 安装了一夜,终于看到了期待已久的画面 第一步.硬件配置(PS:VirtualBox虚拟机): 操作系统:Ubuntu 18.04 CPU:4核 内存:8G 磁盘:60 ...

  10. 如何在python列表中查找某个元素的索引

    如何在python列表中查找某个元素的索引 2019-03-15 百度上回复别人的问题,几种方式的回答: 1) print('*'*15,'想找出里面有重复数据的索引值','*'*15) listA ...