DOMContentLoaded

DOMContentLoaded简介

1、概念

MDN解析:当初始HTML文档已完全加载和解析时,将触发DOMContentLoaded事件,而不需要等待样式表,图像和子框架页面加载(事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

2、HTML解析过程与DOMContentLoaded触发时机

1) 既无js也无css的情况下,HTML文档的解析过程:
在这里插入图片描述
由图可见,DOMContentLoaded触发为DOM之后

画张图简要说明:
在这里插入图片描述

2) 有css无js的情况下,HTML文档的解析过程:
在这里插入图片描述
由图可见,DOMContentLoaded触发仍为DOM之后,无论此时CSS解析为CSSOM的过程是否完成。

3) 既有css也有js的情况下,HTML文档的解析过程:
在这里插入图片描述
上图描述的只包含了同步加载脚本的情况,然而对于js的引用却不止一种方式,对于通过async和defer引用脚本,DOMContentLoaded触发时机存在差异:
a. 普通js/sync
文档解析的过程中,如果遇到script脚本,就会停止页面的解析进行下载,当脚本都执行完毕后,才会继续解析页面。
在这里插入图片描述
b. async
async脚本会在加载完毕后执行。
async脚本的加载不计入DOMContentLoaded事件统计,也就是说下图两种情况都是有可能发生的:
HTML 还没有被解析完的时候,async脚本已经加载完了,那么 HTML 停止解析,去执行脚本,脚本执行完毕后触发DOMContentLoaded事件。
在这里插入图片描述
HTML 解析完了之后,async脚本才加载完,然后再执行脚本,那么在HTML解析完毕、async脚本还没加载完的时候就触发DOMContentLoaded事件
在这里插入图片描述
c. defer
文档解析时,遇到设置了defer的脚本,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析和渲染完毕后,会等到所有的defer脚本加载完毕并按照顺序执行完毕才会触发DOMContentLoaded事件,也就是说下图两种情况都是有可能发生的:
HTML 还没有被解析完的时候,defer脚本已经加载完了,那么 等待HTML 解析完成后执行脚本,脚本执行完毕后触发DOMContentLoaded事件。
在这里插入图片描述
HTML 解析完了之后,defer脚本才加载完,然后再执行脚本,脚本执行完毕后触发DOMContentLoaded事件。
在这里插入图片描述

DOMContentLoaded和load的区别

document.readyState

document.readyState属性描述了文档的加载状态。一个文档的readyState可以是以下之一:
loading——加载,此时document仍在加载
interactive——互动,此时文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。
complete——完成,此时T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

含义document.readyState
DOMContentLoaded当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。interactive
load当一个资源及其依赖资源已完成加载时,将触发load事件。complete

在这里插入图片描述

如上图,可以看到图上有两条线:一条蓝线,代表DOMContentLoaded事件;一条红线,代表load事件。
下面通过加载图片的页面看一下DOMContentLoadedload的区别
在这里插入图片描述

  • 26
    点赞
  • 72
    收藏
  • 打赏
    打赏
  • 3
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 3

打赏作者

安歌的博客

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值