HTML文档解析和DOM树的构建

时间: 2018-05-14阅读: 1761标签: dom

浏览器解析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>


浏览器解析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>结束标签。

来源:https://blog.csdn.net/Alan_1550587588/article/details/80297765

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/765

从 React 历史的长河来聊如何理解虚拟DOM

最近我发现很多面试题里面都有「如何理解虚拟 DOM」这个题,我觉得这个题应该没有想象中那么好答,因为很多人没有真正理解虚拟 DOM 它的价值所在,我这篇从虚拟 DOM 的诞生过程来引出它的价值以及历史地位,帮助你深入的理解它。

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

javascript中DOM是什么?

DOM(document object model)文档对象模型,是一项W3C 标准,是针对HTML和XML的一个API(应用程序接口)。它允许程序和脚本动态地访问、更新文档的内容、结构和样式。

JavaScrip之DOM

HTML 文档的骨干是标签。根据文档对象模型(DOM),每个HTML标签都是一个对象,同样标签内的文本也是一个对象。因此这些对象都可通过 JavaScript 操作,如果文档中有空格(就像任何字符一样)

基于虚拟 DOM 库 (Snabbdom) 的迷你 React

React 是 JavaScript 社区的新成员,尽管 JSX (在 JavaScript 中使用 HTML 语法)存在一定的争议,但是对于虚拟 DOM 人们有不一样的看法。对于不熟悉的人来说,虚拟 DOM 可以描述为某个时刻真实DOM的简单表示。

通过编写简易版本的虚拟DOM,来理解虚拟DOM 的原理

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂

实现虚拟DOM

该程序向全局暴露了一个Vdom对象,Vdom提供了两个方法,createElement(),render(),分别用于创建元素及把虚拟dom渲染到真实dom节点

为什么虚拟DOM更优胜一筹

我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自己手动将数据整体传入模板函数, 得到一个字符串,使用innerHTML刷新某个容器!注意,这里其实可以优化,但由于是手动,是体力活

React虚拟DOM

其中浏览器展示HTML经过了:构建DOM树,解析CSS构建CSSOM树,DOM与CSSOM结合成为RenderObject树,然后将RenderObject树渲染成页面(布局->重绘),这个过程是由渲染引擎做的

Vue 数据更新后调用nextTick更新DOM

如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!