文档章节

可视化讲解 DOM 构建过程

ssthouse_hust
 ssthouse_hust
发布于 07/10 12:18
字数 1271
阅读 691
收藏 11

前言

最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

记得我之前也为理解 DOM 构建流程查阅过数次资料, 虽然每次查阅完都觉得 DOM 构建流程很简单, 看完便懂, 但是懂了又忘还是让人有些头疼.

为了给自己加深印象, 也为了为大家提供一个可视化的理解 DOM 构建过程的方式, 笔者制作了一个简单的网页来动态演示 DOM 构建过程. 希望能给大家带来一些帮助.

效果

在线查看

在线 demo (请使用 pc 访问)

前进, 后退

网页展示了一个简单的 HTML 页面的 DOM 渲染过程. 用户点击前进,后退按钮时, 页面左侧会显示出当前的 HTML 代码, 右侧则会显示出实时的 DOM 结构图:

forward and backword

自动播放

点击 Auto Play 按钮, 页面会自动播放页面的整个构建过程:

auto play

DOM 构建过程

DOM 元素的作用 & 基本构建过程:

这里直接引用一下原文:

The goal of this page-building phase is to set up the UI of a web application, and this is done in two distinct steps: 1 Parsing the HTML and building the Document Object Model (DOM) 2 Executing JavaScript code Step 1 is performed when the browser is processing HTML nodes, and step 2 is > performed whenever a special type of HTML element—the script element (that > contains or refers to JavaScript code)—is encountered. During the page-building phase, the browser can switch between these two steps as many times as necessary.

浏览器 页面构建 步骤的目的是为 UI 渲染做准备, 页面构建是由下面两部分购成的:

  • 解析 HTML 节点, 并且构建 DOM 元素
  • 执行 JavaScript 代码

其中第一步在浏览器解析到 HTML 节点时执行, 第二步在解析到 script 标签时执行. 在页面构建的过程中, 以上两步可以无数次的交替执行.

It’s important to emphasize that, although the HTML and the DOM are closely linked, with the DOM being constructed from HTML, they aren’t one and the same. You should think of the HTML code as a blueprint the browser follows when > constructing the initial DOM—the UI—of the page. The browser can even fix > problems that it finds with this blueprint in order to create a valid DOM.

需要注意的是, 虽然 HTML 和 DOM 两者关系紧密(DOM 是由 HTML 文件构建而来), 但他们并不是相同的. 你应该将 HTML 看作是浏览器用来渲染 DOM 元素(页面 UI) 的蓝图. 浏览器甚至可以可以修复这个蓝图(HTML)中的问题, 并构建出有效的 DOM.

下面用可视化讲解中的步骤依次讲解:

首先看看我们想要渲染的 HTML 代码:

<!DOCTYPE html>
<html>
    <head>
      <title>Web app lifecycle</title>
      <style>
          #list { color: green;}
          #second { color: red;}
      </style>
    </head>
    <body>
        <h1>head one</h1>
        <ul id="list"></ul>
        <script>
            var liElement = document.createElement("li");
            liElement.textContent = 'I am a li';
            document.getElementById('list').appendChild(liElement);
        </script>
    </body>
</html>

接下来按照浏览器的构建顺序来看:

首先浏览器遇到下面这段代码, 解析出 html 节点作为 DOM 的根节点:

<!DOCTYPE html>
<html>

step 1

接下来是 <head> 标签, 将其放置在 html 节点下:

step 2

继续解析, 遇到 <title> 标签, 因为其是 <head> 的子标签, 故将其放置在 head 节点下.

step 3

然后是 <style> 标签, 类似的, 放在 head 节点下:

<style>
    #list { color: green;}
    #second { color: red;}
</style>

step 4

接下来解析到 <body> 标签, 因其为 <html> 的子标签, 故将其放置在 html 节点下:

step 5

然后是 <h1> 标签, 放置在 body 节点下:

step 6

继续, <ul> 标签, 同样的, 放置在 body 节点下:

step 7

接下来, 浏览器遇到了 <script> 标签, 根据前面的知识我们知道, 浏览器会停下来并执行<script> 中的代码. 所以下面这段代码会被立即执行:

<script>
    var liElement = document.createElement("li");
    liElement.textContent = 'I am a li';
    document.getElementById('list').appendChild(liElement);
</script>

这段代码的逻辑是: 向 idlist 的 DOM 节点添加一个 li 作为子元素, 故执行完成后 DOM 树会是这样:

step 7

最后, 浏览器会解析到 <body/></html> 等标签, 结束解析过程. 最终我们得到的 DOM 结构如图:

step 9

后记

预计我会将 Secrets of the JavaScript Ninja 后续章节中的一些知识点也通过类似的方式进行可视化.

如果你也有希望能做成可视化讲解的: 知识点, 算法, 技术原理, 欢迎在下面留言与我交流, 期待大家的反馈 :)

演示页面用到的技术为: Vue, D3.js, 欢迎 fork & star Github 地址

想继续了解 D3.js

这里是我的 D3.js数据可视化 相关博客的 github 地址, 欢迎 fork & star :tada:

D3-blog

如果觉得不错的话, 不妨点击下面的链接关注一下 : )

github 主页

知乎专栏

掘金

想直接联系我 ?

邮箱: ssthouse@163.com

微信:

wechat

© 著作权归作者所有

共有 人打赏支持
ssthouse_hust
粉丝 7
博文 14
码字总数 23471
作品 0
武汉
私信 提问
精益 React 学习指南 (Lean React)

本书内容 这本书我会由简单到复杂的带领大家进入 React 的世界, 其中 1 - 3 章节都是 React 的基础知识,需要提醒读者的是大多数的基础知识都可以通过 React 的官方文档学习,如果对英语敏感...

陈学家
2016/05/25
0
0
html5知识点:DOM编程

DOM是Document Object Model的缩写,中文名称是文档对象模型。 DOM是处理HTML页面的标准编程接口,DOM可被JavaScript用来读取、改变HTML的内容和结构。 前端三大件指HTML、CSS、JavaScript,...

汪秦凯
2017/11/20
0
0
WebKit技术内幕(笔记)

一:浏览器 1.渲染引擎: html解释器:主要作用是将HTML文本解释成DOM树 css解释器 :为DOM中的各个元素对象计算出样式信息,从而为计算后网页的布局提供基础设施 布局:在DOM创建之后,Webki...

前端小虾
2016/10/10
15
0
[译]D3.js 之 d3-selection 原理

[译]D3.js 之 d3-selection 原理 译者注 原文: 来自 D3.js 作者 Mike Bostock 的How Selections Works 译者: ssthouse 译文 在前一篇文章中, 我介绍了关于 D3 selection 的基础, 这些基础足以...

ssthouse_hust
06/29
0
0
《React Native 精解与实战》书籍连载「React 与 React Native 简介」

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 ...

Parry
08/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

php获取客户端IP

php获取客户端IP 首先先阅读关于IP真实性安全的文章:如何正確的取得使用者 IP? 「任何從客戶端取得的資料都是不可信任的!」 HTTP_CLIENT_IP头是有的,但未成标准,不一定服务器都实现。 ...

DrChenXX
昨天
0
0
. The valid characters are defined in RFC 7230 and RFC 问题

通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证。 具体来说,就是添加了些规则去限制HTTP头的规范性 参考这里 具体来说: org.apache.tom...

west_coast
昨天
1
0
刷leetcode第704题-二分查找

今天双十一买的算法书到货了,路上刷到有人说的这个题,借(chao)鉴(xi)一下别人的思路,这个是C++标准库里面的经典方法,思路精巧,优雅好品味 int search(int* nums, int numsSize, in...

锟斤拷烫烫烫
昨天
2
0
【分享实录】BANCOR算法详解及代码实现

1 活动基本信息 1)主题:【区块链技术工坊22期】BANCOR算法详解及代码实现 2)议题: BANCOR算法的特点和优劣势 BANCOR算法和举例 如何加入BANCOR.NETWORK交易所 如何开发自己的BANCOR去中心...

HiBlock
昨天
2
0
微信小程序(2)

开始看微信小程序的教程了。刚刚看完官方教程的视图层部分。这里摘录一些自己认为的部分关键点。 1.直接修改数值无法重新渲染,需要使用setData()方法; 2.列表渲染中:wx:key用于保持项目在...

MKjy
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部