传智博客
快捷导航
蚂蚁部落 网站首页 前端教程 JS教程 查看内容

栏目导航

≡基础知识≡

≡操作符≡

≡语句≡

≡函数≡

≡面向对象≡

≡对象≡

≡事件≡

≡事件对象≡

≡操作DOM方法≡

≡操作DOM属性≡

≡操作table表格≡

≡操作select控件≡

≡操作cookie≡

≡浏览器对象模型≡

≡进阶≡

DOMContentLoaded 事件

2017-9-23 16:17| 发布者: admin| 查看: 581| 评论: 0|来自: 蚂蚁部落

传智播客

当DOM文档被加载和解析完成之后DOMContentLoaded事件触发。

与load事件十分类似,但是DOMContentLoaded事件无需等待图片、css样式文件和子框架加载完成。

作用与jQuery中的ready事件相同。

关于load事件可以参阅window.onload用法详解一章节。

关于事件处理函数注册,可以参阅如何注册事件处理函数一章节。

打开谷歌开发者工具,切换到Network面板,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/14/162918a9yodz0ve90cot4y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

蓝色竖线是DOMContentLoaded事件完成的时刻,后面红色的是load事件完成的时刻。

DOMContentLoaded早于load,这很好理解,因为load需要等待图片等等内容完全加载完毕才会触发。

浏览器支持:

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

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

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

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

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

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

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant{
  position:relative; 
  width:100px;
  height:100px;
  background-color:red;
  left:100px; 
  top:100px;
}
</style>
<script type="text/javascript"> 
document.addEventListener("DOMContentLoaded", function() {
  var odiv=document.getElementById("ant");
  odiv.innerHTML="蚂蚁部落";
}, false);
</script> 
</head>
<body> 
<div id="ant"></div>
</body>
</html>

当文档加载和解析完毕DOMContentLoaded事件触发,然后将字符串写入div。

DOMContentLoaded事件还会涉及到一些细节,下面再来详细做一下介绍。

当服务器向浏览器发送HTML文档之后,浏览器就开始对其进行解析,然后生成DOM,此刻文档就被加载和解析完成,通常情况下DOMContentLoaded事件会触发(当然有例外,后面会介绍),如果存在CSS,那么会生成 CSSOM,然后DOM和CSSOM合并产生渲染树。渲染树包含节点各种布局信息,然后再根据这些信息计算元素在浏览器中的确切大小和位置,这就是布局阶段,最后将其绘制于浏览器上功浏览者使用,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/14/170623lgq3s63l3lguzwiu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面并没有考虑JavaScript的影响;JavaScript会阻塞DOM的生成,浏览器在解析文档时,如果遇到JavaScript(同步),则首先加载并执行JavaScript代码,然后再继续进行解析,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/14/171252i0os7uvwnsoyyl2v.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(1).绿色表示HTML文档解析。

(2).灰色表示阻塞。

(3).紫色表示js文件加载。

(4).红色表示js代码执行。

添加defer属性,代码如下:

[HTML] 纯文本查看 复制代码运行代码
<script src="JS/ts.js" defer type="text/javascript"></script>

这时候js代码的加载是异步进行,即便是js提前加载完毕,也会等待HTML文档解析完毕再去执行:

a:3:{s:3:\"pic\";s:43:\"portal/201708/14/172024l8kk7oojakr7x71q.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

添加async属性,代码如下:

[HTML] 纯文本查看 复制代码运行代码
<script src="JS/ts.js" async type="text/javascript"></script>

这时候js代码会异步加载,加载完成之后立即执行并阻塞HTML文档的解析:

a:3:{s:3:\"pic\";s:43:\"portal/201708/14/172504cwqs271kd2kqs1kc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

defer对DOMContentLoaded影响:

如果<script>添加了defer,那么需要等待js代码执行完毕才会触发此事件。

又由于此时js会等到HTML文档解析完毕以后再去执行,同时js也必须等待CSSOM构建完成再去执行,所以DOMContentLoaded事件是在THML文档解析、CSSOM构建完成和JS执行完毕后触发。

async对DOMContentLoaded影响:

可以说没有什么影响,只要DOM解析完毕就会触发。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-11 19:22 , Processed in 0.070003 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部