对前端同学而言,loade,unload,DOMContentLoaded等页面加载过程中会触发的事件肯定是都接触过,不过要是具体问各个事件的区别,我就不是那么能清晰的解答上来的了。正好刚刚在无阻塞脚本那看到了DOMContentLoaded事件,就来翻翻具体文档详细看一下各个事件吧。常言道温故而知新,让我们一起回头看一下

触发时机

先看下各个事件的触发时机(参考自MDN)

DOMContentLoaded

当初始html文档完全加载并解析之后触发,无需等待样式、图片、子frame结束。作为明显的对比,load事件只有一个页面完全被加载时才触发。改用DOMContentLoaded的地方常常是load来代替,这是错误的。

tips: 有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪即ready事件,后面我们可以看下zepto的实现

load

当一个资源及其依赖的资源结束加载时触发。从这里可以看到需要等待依赖资源的结束加载。

readystatechange

document有readyState属性来描述document的loading状态,readyState的改变会触发readystatechange事件.

  • loading

    文档仍然在加载

  • interactive

    文档结束加载并且被解析,但是想图片,样式,frame之类的子资源仍在加载

  • complete

    文档和子资源已经结束加载,该状态表明将要触发load事件。

因此,我们同样可以使用该事件来判断dom的加载状态。

但并非所有对象都会经历 readyState 的这几个阶段,有时候需要

beforeunload

当浏览器窗口,文档或其资源将要卸载时,会触发beforeunload事件。这个文档是依然可见的,并且这个事件在这一刻是可以取消的.

如果处理函数为Event对象的returnValue属性赋值非空字符串,浏览器会弹出一个对话框,来询问用户是否确定要离开当前页面(如下示例)。有些浏览器会将返回的字符串展示在弹框里,但有些其他浏览器只展示它们自定义的信息。没有赋值时,该事件不做任何响应。

tip:2011年5月25号起,html5中指出,该事件中调用window.alert(), window.confirm(), and window.prompt()方法将会被忽略。

unload

当文档或者一个子资源将要被卸载时,在beforeunload 、pagehide两个事件之后触发。

文档会处于一个特定状态。

  • 所有资源仍存在 (图片, iframe 等.)
  • 对于终端用户所有资源均不可见
  • 界面交互无效 (window.open, alert, confirm 等.)
  • 错误不会停止卸载文档的过程

页面加载中的执行顺序

从上面的定义,我们可以得出一个比较清晰的顺序了。

  1. 页面加载开始,首先肯定是先发出加载资源的请求,加载未完成之前,不触发任何事件。

  2. document加载结束并解析,此时css等其他资源未加载完成。

    此时readyState为'interactive',表明document已经load并解析完成,触发 readystatechange,然后触发DOMContentLoaded(在大多数浏览器上的表现如此)。捎带提一句,此时,加载完成且带有defer标记的脚本,会按顺序开始执行。

  3. css、img等子资源加载完成之后

    此时触发window.load事件

  4. 点击关闭标签或者刷新时,会依次触发beforeunload、unload事件。

可能概念看的有点枯燥,还是看下代码比较清晰。大家可以看下,下面的代码会依次输出什么。

<!DOCTYPE html>
<html> <head>
<title>文档加载事件</title>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
console.log("初始DOM 加载并解析");
});
window.addEventListener("load", function (event) {
console.log("window 所有资源加载完成");
}); document.onreadystatechange = function () {
console.log(document.readyState)
if (document.readyState === "complete") {
console.log('初始DOM,加载解析完成')
}
}
window.addEventListener("beforeunload", function (event) {
console.log('即将关闭')
event.returnValue = "\o/";
});
window.addEventListener('unload', function (event) {
console.log('即将关闭1');
});
</script>
<link rel="stylesheet" href="./test.css">
</head> <body>
<div id="root">dom事件</div>
<script src="./index.js"></script>
</body> </html>

依次输出如下:

    interactive //(index):15
初始DOM 加载并解析 //(index):8
complet//(index):15
初始DOM,加载解析完成//(index):17
window 所有资源加载完成//(index):11
//点击关闭按钮
即将关闭
即将关闭2

关于ready

像jquery、zepto等类库中都有document一个ready方法,来确保我们的操作在初始dom加载之后进行,原生dom定义里是没有这个api的,是大牛们封装了一下判断的过程,提供我们以便利。

有了前面的例子,让我们猜一下他们是怎么实现的。

  1. ready对应的状态是初始化dom已经加载完成,我们来看一下什么情况下对应该情况。

    有下面几个状态,complete、interactive 还有一个DOMContentLoaded也是初始dom加载完成,当然还有load事件,显然这里不会用到它,相对其他状态而言有点太晚了。

  2. 确定触发条件之后,下面的实现就简单了,判断就行了。

以zepto为例,我们看下实现:

//声明变量,不只使用interactive,是因为前面提到这些状态不一定全部出现
readyRE = /complete|loaded|interactive/ ready: function(callback){
// need to check if document.body exists for IE as that browser reports
// document ready when it hasn't yet created the body element
if (readyRE.test(document.readyState) && document.body) callback($)
else document.addEventListener('DOMContentLoaded', function(){ callback($) }, false)
return this
}

至此,介绍就结束了。对我而言,明了原来不太清楚的概念,希望对大家也有所帮助。

DOMContentLoaded、readystatechange、load、ready详谈的更多相关文章

  1. 【转载】DOMContentLoaded与load的区别

    DOMContentLoaded与load的区别   (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? ( ...

  2. DOMContentLoaded vs jQuery.ready vs onload, How To Decide When Your Code Should Run

    At a Glance Script tags have access to any element which appears before them in the HTML. jQuery.rea ...

  3. js DomContentLoaded 和 load 的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  4. js中DOMContentLoaded和load的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  5. onload事件属性,JQ中的load,ready方法

    onload事件属性,JQ中的load,ready方法 前言 页面中的很多操作,需要我们在所需资源下载完成后,才可以进行操作,而资源没有及时下载,我们进行操作的话,是会报错.因此我们需要熟练掌握哪些事 ...

  6. 资源载入和页面事件 load, ready, DOMContentLoaded等

    资源载入和页面事件 理想的页面载入方式 解析HTML结构. 载入并解析外部脚本. DOM树构建完成,运行脚本.//DOMInteractive –> DOMContentLoaded 载入图片. ...

  7. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  8. DOMContentLoaded和load

    /* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...

  9. DOMContentLoaded与load的区别

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的 ...

随机推荐

  1. 关于安卓手机的牛逼软件termux使用

    最近在学着用linux,偶尔发现了一款神奇的软件--termux,termux是一款来自国外的终端模拟器,是运行在内部存储上的程序(不在内存卡上),功能比较强大,启动程序之后会进入命令行终端,需要基本 ...

  2. 解析 C# 7中的元组类型(ValueTuple)

    System.Tuple 类型是在.NET 4.0中引入的,但是有两个明显的缺点: (1) Tuple 类型是引用类型. (2) 没有构造函数支持. 为了解决这些问题,C# 7 引入了新的语言功能以及 ...

  3. HTML中动态生成内容的事件绑定问题【转载】

    转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中 ...

  4. 逻辑卷lvm创建、扩展、缩小

    系统环境:CentOS Linux release 7.3.1611 (Core) 3.10.0-514.el7.x86_64 CentOS6与7配置方法大同小异.通常是在系统安装的时候创建lvm,然 ...

  5. C# 面向对象基础&封装&继承&多态&加深一下冒泡排序写法

    (一)面向对象是什么? 面向对象是一种编程思想 (二)为什么要用面向对象? 1.结构清晰 2.易于维护 3.方便扩展 (三)new一个对象是什么过程? 实例化构造函数创建对象的过程就是将类实例化的过程 ...

  6. Delphi工程版本号修改工具

    自动修改某目录下符合条件的Delphi工程(dproj)版本号, 支持命令行调用支持通配符忽略文件 -p [Path] 在[Path]路径下查询所有dproj文件(可以为空, 默认路径为程序当前路径) ...

  7. jQuery+ajax实现局部刷新

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...

  8. php 例子 如何转换ISO8601为 utc时间

    //firstpowertime "2017-01-02T13:22:22" 获取时间$firstpowertime=$list[$i]['firstpowertime'];//判 ...

  9. C#2.0中使用yield关键字简化枚举器的实现

    我们知道要使用foreach语句从客户端代码中调用迭代器,必需实现IEnumerable接口来公开枚举器,IEnumerable是用来公开枚举器的,它并不实现枚举器,要实现枚举器必需实现IEnumer ...

  10. Linux 性能搜集【linux_reports-cpu/memory/disks/network】

    为方便问题发生后,问题原因的分析排查,我们可以在服务器中事先部署如下脚本,方便故障发生后,问题原因的分析排查 脚本部署方法: 1.将脚本[linux_reports.sh]上传到服务器 2.登陆虚拟机 ...