WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload

简言

理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解，在元素未加载就提前操作元素，则得不到想要的结果。而如果页面完全加载完成后，再进行操作，则又会影响用户体验。

一般来说，大多数的操作我们都应该放在DOMContentLoaded事件中执行。采用如下形式：

document.addEventListener('DOMContentLoaded', function () {alert("DOMContentLoaded");
});

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

说明

理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。用过JQuery都知道，我们大多将代码写在$(document).ready()中，当文档加载完成后，就会执行该函数。如果不这样做，在文档未加载完成之前操作DOM，就得不到想要的结果。

演示程序

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>42度空间-Html页面的生命周期,DOMContentLoaded,load,beforeunload,unload</title>
</head>
<body>
<div id="main"></div>
<iframe src="http://res.42du.cn/static/html/iframe.html" height="35" onload="append('iframe onload')"></iframe>
<div><img src="http://res.42du.cn/up/201802/cbbtiga6.jpg?cache=none" onload="append('image onload')"></div>
<script>var output = "";function print() {document.getElementById("main").innerHTML  = output;}function append(data) {output  = data " <br />";}document.addEventListener('readystatechange', function () {append("readyState : " document.readyState);});document.addEventListener('DOMContentLoaded', function () {append("DOMContentLoaded");});window.onload = function () {append("window onload");print();};append("script executed");
</script>
</body>
</html>

从演示程序运行结果，得出一般浏览器的加载顺序如下：

script executed
readyState : interactive
DOMContentLoaded
image onload
iframe onload
readyState : complete
window onload

从以上可以看出同步的Script总是先于其它事件执行，而window.onload事件总是最后执行。而image onload和iframe onload的先后顺序并不确定。

结论

关于WEB页面的生命周期，一般你应该记住如下这些观点，一些观点从运行结果中也可以得出。

同步的JavaScript脚本最先执行，它先于DOMContentLoaded事件执行。
当DOM准备就绪时，DOMContentLoaded事件在document上触发。我们可以在这个阶段利用JavaScript来操作DOM元素。
- 所有脚本都执行完毕，除了那些外部使用异步（async）或延迟（defer）加载的脚本
- 图片和其他资源可能仍在载入过程中。
window上的onload事件，在页面加载完所有资源后触发。我们很少使用它，因为通常的操作不用等到最后才执行。
window上的beforeunload事件，该事件在用户准备离开页面，在unload事件之前触发。如果beforeunload返回一个字符串，浏览器会给出用户是否真的想离开的提示。
window上的unload事件，当用户最终离开时会触发该事件。在unload的事件处理程序中，我们只能做简单的事情，不涉及延迟或询问用户。由于这个限制，它很少使用。
document.readyState表示文档的当前状态，可以在readystatechange事件中跟踪文档状态的变更。
- loading – 文档正在载入。
- interactive – document已经解析完毕时触发，几乎与DOMContentLoaded同时发生，但在DOMContentLoaded事件之前触发。
- complete – 文档和资源加载完成时触发，几乎与window.onload同时发生，但在onload事件之前触发。

一般来说，大多数的操作我们都应该放在DOMContentLoaded事件中执行，而不要放在window.onload中执行。

42度空间-在线演示程序

更多专业前端知识，请上【猿2048】www.mk2048.com

WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload相关推荐

页面生命周期：DOMContentLoaded, load, beforeunload, unload
页面生命周期:DOMContentLoaded, load, beforeunload, unload 原文地址:http://javascript.info/onload... HTML页面的生命周 ...
页面生命周期：DOMContentLoaded, load, beforeunload, unload解析
HTML页面的生命周期有以下三个重要事件: DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是像是 <img> 和样式表等外部资源可能并没 ...
HTML页面的生命周期
页面生命周期:DOMContentLoaded, load, beforeunload, unload HTML页面的生命周期有以下三个重要事件: DOMContentLoaded - 浏览器已经完全 ...
ZT Web Control 开发系列(一) 页面的生命周期
http://www.cnblogs.com/joeliu/category/143125.html Page是WebForm编程基本元素,它从TemplateControl派生,而TemplateC ...
HTML 页面的生命周期、HTML 事件
From:https://blog.csdn.net/WuLex/article/details/101016936 1.页面生命周期 HTML页面的生命周期有以下三个重要事件,每个事件都有特定的用途 ...
Asp.net2.0页面的生命周期(续）
以上就是Asp.net页面生命周期中的几个主要事件.每次我们请求一个Asp.net页面时,我们都经历着同样的过程:从初始化对象到销毁对象.通过了解Asp.net页面的内部运行机制,我相信大家在编写.调 ...
【转】Asp.net页面的生命周期
介绍 Asp.net是微软.Net战略的一个组成部分.它相对以前的Asp有了很大的发展,引入了许多的新机制.本文就Asp.net页面的生命周期向大家做一个初步的介绍,以期能起到指导大家更好.更灵活地操 ...
.Net页面的生命周期（ZZ）
1. 初始化:主要是执行Page的Init事件和OnIint方法. 2. 加载视图状态:主要是执行LoadViewState方法,就是从ViewState中获取上一次的状态 ...
Asp.net2.0页面的生命周期
当一个获取网页的请求(可能是通过用户提交完成的,也可能是通过超链接完成的)被发送到Web服务器后,这个页面就会接着运行从创建到处理完成的一系列事件.在我们试图建立Asp.net页面的时候,这个执行 ...

WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload

简言

说明

演示程序

结论

WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload相关推荐

最新文章

热门文章