文章导航

DOMContentLoaded 事件

2018-12-26 23:51| 作者: admin| 查看: 1442| 评论: 0|来自: 蚂蚁部落

DOMContentLoaded 事件会在文档完全加载和解析之后触发,无需等待CSS文件、图片和子框架加载完毕。

看到上述对事件的阐述,肯定有很多朋友会想到window.onload事件,非常相似。

两个事件主要区别如下:

(1).DOMContentLoaded 事件是在文档完全加载和解析之后触发。

(2).window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等。

所以在很多需求中,window.onload事件并不是最佳选择器,使用DOMContentLoaded事件效率会更高。

谷歌开发者工具页面加载图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235225uq71q2u22xq5273u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图片分析如下:

(1).蓝色竖线是DOMContentLoaded事件触发的时刻。

(2).红色竖线是window.onload事件触发的时刻。

(3).从最下面可以看到,DOMContentLoaded事件更早触发。

如果看到上述分析后,对此事件理解还是不够透彻,不用担心,后面还会有更详细介绍。

浏览器支持:

(1).IE9+浏览器支持此事件。

(2).edge浏览器支持此事件。

(3).火狐浏览器支持此事件。

(4).Opera浏览器支持此事件。

(5).谷歌浏览器支持此事件。

(6).safria浏览器支持此事件。

DOMContentLoaded事件触发时机:

下面结合图示介绍一下,DOMContentLoaded事件触发的时机。

明确了事件的触发时机,也就知道在何种场景下应用此事件,当然理解为何有时比window.onload高效。

DOMContentLoaded触发可能会受到CSS文件加载和JavaScript文件的影响,所以分为如下三种情况。

1.没有<style>与<script>标签的情况:

事件触发时机图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235300bmtflv330001zczm.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图示分析如下:

(1).HTML代码完全下载完毕后,生成DOM,此时触发DOMContentLoaded 事件。

(2).由此可见此事件是在用户看到页面内容之前触发。

(3).然后根据DOM生成一个渲染树,浏览器根据渲染树的内容计算出元素在文档中的位置。

(4).最后绘制出来,呈现在浏览者面前。

2.具有CSS代码情况:

无论是引入的CSS代码,还是内部的CSS代码都不会对DOMContentLoaded 事件造成影响。

事件触发时机图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235321eiczvl71s60erloy.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).遇到CSS代码之后,会生成CSSDOM,此时并不影响DOM的生成。

(2).所以不会影响DOMContentLoaded事件的触发。

(3).此时渲染树是基于DOM与CSSDOM生成的。

(4).然后根据DOM生成一个渲染树,浏览器根据渲染树的内容计算出元素在文档中的位置。

(5).最后绘制出来,呈现在浏览者面前。

3.具有JavaScript代码情况:

JavaScript代码对DOMContentLoaded 事件的触发是有影响的。

事件触发时机图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235347vgtgzmzncqsgqbpj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由上图可以看到,JavaScript加载和执行会迟滞DOMContentLoaded 事件的触发。

JavaScript要等待CSS渲染完成再去加载和执行,因为浏览器无法确定JavaScript是否需要DOM元素信息。

为确保JavaScript获取的是最新的信息,会首先加载和渲染CSS。

为了解决JavaScript阻塞问题,HTML5为<script>标签新增sync和defer属性。

具体参阅async 与 defer 的作用一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
</style>
<script>
addEventListener("DOMContentLoaded",function(){
  let lis=document.getElementsByTagName("li");
  lis[1].style.color="red";
},false);
</script>
</head>
<body>
  <ul id="box">
    <li>蚂蚁部落一</li>
    <li>蚂蚁部落二</li>
    <li>蚂蚁部落三</li>
    <li>蚂蚁部落四</li>
    <li>蚂蚁部落五</li>
    <li>蚂蚁部落六</li>
  </ul>
</body>
</html>

上述代码会在文档加载和解析完毕后触发DOMContentLoaded 事件。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部