文档章节

可视化讲解 DOM 构建过程

ssthouse_hust
 ssthouse_hust
发布于 07/10 12:18
字数 1258
阅读 461
收藏 4
点赞 0
评论 0

前言

最近在看 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_hust
粉丝 3
博文 10
码字总数 17313
作品 0
武汉
精益 React 学习指南 (Lean React)

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

陈学家
2016/05/25
0
0
WebKit技术内幕(笔记)

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

前端小虾
2016/10/10
15
0
JavaScript 工作原理之十一-渲染引擎及性能优化小技巧

原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。 本系列持续更新中,Github 地址请查阅这里。 这是 JavaScript 工作原理的第十一章。 迄今为止,之前的...

tristan
06/17
0
0
html5知识点:DOM编程

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

汪秦凯
2017/11/20
0
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
年末蓄势再掀风云,和贯科技勇夺一标

和贯科技2017年年末再夺一标:《西南大学智能设备管理与业务服务流程平台定制开发服务》 智能制造环境下,设备日益智能化,但无论设备如何智能,如何自动化,也避不开设备的老化和磨损 同时,...

和贯科技
2017/12/29
0
0
前端文摘:深入解析浏览器的幕后工作原理

简介   网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输入 直到您在浏览器屏幕上看到 Google 首页的整个过程中都发生了...

effto
2016/09/13
16
0
浏览器的工作原理:新式网络浏览器幕后揭秘(转)

序言 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源)...

Jeky
2012/12/07
1K
8
Pentaho6.1中D3可视化库的集成及数据联动的实现

1、软件环境 操作系统版本:Win 10 64位 可视化图形库:D3 Pentaho版本: biserver-ce-6.1.0.1-196 2、对D3的简单介绍 D3允许你将任意的数据绑定到文档对象模型(DOM),然后运用数据驱动转换...

灯下黑鬼吹灯
2016/10/30
479
0
How browsers work【中文版】

序言 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源)...

k_k_anna
2015/02/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
2
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
1
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
1
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
3
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
1
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
1
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部