摘要：简言理解页面的生命周期，文档加载事件及顺序对开发有十分的重要意义。同步的脚本最先执行，它先于事件执行。当准备就绪时，事件在上触发。表示文档的当前状态，可以在事件中跟踪文档状态的变更。已经解析完毕时触发，几乎与同时发生，但在事件之前触发。
简言
理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解，在元素未加载就提前操作元素，则得不到想要的结果。而如果页面完全加载完成后，再进行操作，则又会影响用户体验。
一般来说，大多数的操作我们都应该放在DOMContentLoaded事件中执行。采用如下形式：
document.addEventListener("DOMContentLoaded", function () {
alert("DOMContentLoaded");
});
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
说明理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。用过JQuery都知道，我们大多将代码写在$(document).ready()中，当文档加载完成后，就会执行该函数。如果不这样做，在文档未加载完成之前操作DOM，就得不到想要的结果。
演示程序
42度空间-Html页面的生命周期,DOMContentLoaded,load,beforeunload,unload
";
}
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 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度空间-在线演示程序
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92922.html
摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。 页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....
摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。 页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....
摘要：所以所需要的时间必然大于等于所需要的时间。页面的生命周期主要有三个重要的事件，已经构建好，可以对节点进行操作，所有资源加载完毕，可以对资源进行一系列操作，比如获取图片宽高等基本不会用到，当浏览器窗口关闭或者刷新时，会触发事件。 DOMContentLoaded与load的区别 showImg(https://segmentfault.com/img/remote/14600000192...
摘要：简介最近对于文档加载方法有了新的理解，因此整理成一片简记，方便以后进行查阅。此状态为树构建完成后触发，和一样，但在其之后触发兼容性以上可用方法当浏览器窗口，文档或其资源将要卸载时，会触发事件。没有赋值时，该事件不做任何响应。 简介 最近对于文档加载方法有了新的理解，因此整理成一片简记，方便以后进行查阅。先来一段Html，作为我们研究的基础吧。 ...
阅读 2126·2021-11-12 10:34
阅读 1357·2019-08-29 16:15
阅读 2578·2019-08-29 15:17
阅读 1117·2019-08-23 17:09
阅读 261·2019-08-23 11:37
阅读 2330·2019-08-23 10:39
阅读 352·2019-08-22 16:43
阅读 3009·2019-08-22 14:53
