From：https://blog.csdn.net/WuLex/article/details/101016936

1、页面生命周期

HTML页面的生命周期有以下三个重要事件，每个事件都有特定的用途

• DOMContentLoaded ： 浏览器已经完全加载 HTML，DOM 树已经构建完毕，js 可以访问所有DOM节点，初始化界面。但是像是 <img> 和 样式表 等外部资源可能并没有下载完毕。
• load ： 浏览器已经加载了所有的资源（ 图像，样式表等 ）。可以在此事件触发时获得图像的大小（ 如果没有被在 HTML/CSS 中指定 ）
• beforeunload / unload ： 当用户离开页面的时候触发。( 可以询问用户是否保存了更改以及是否确定要离开页面。 )

1.1 DOMContentLoaded

DOMContentLoaded 由 document 对象触发。可以使用 addEventListener 来监听它：

document.addEventListener("DOMContentLoaded", ready);

<script>function ready() {alert('DOM is ready');// image is not yet loaded (unless was cached), so the size is 0x0alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);}document.addEventListener("DOMContentLoaded", ready);
</script><img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

<link type="text/css" rel="stylesheet" href="style.css">
<script>// the script doesn't not execute until the stylesheet is loaded// 脚本直到样式表加载完毕后才会执行。alert(getComputedStyle(document.body).marginTop);
</script>

浏览器的自动补全

Firefox、Chrome 和 Opera 会在 DOMContentLoaded 执行时自动补全表单。例如，如果页面有登录的界面，浏览器记住了该页面的用户名和密码，那么在 DOMContentLoaded 运行的时候浏览器会试图自动补全表单（如果用户设置允许）。

所以如果 DOMContentLoaded 被一个需要长时间执行的脚本阻塞，那么自动补全也会等待。你也许见过某些网站（如果你的浏览器开启了自动补全）--- 浏览器并不会立刻补全登录项，而是等到整个页面加载完毕后才填充。这就是因为在等待DOMContentLoaded事件。

defer 是会阻塞 DOMContentLoaded 的，被 defer 的脚本要在DOMContentLoaded 触发前执行，所以如果HTML很快就加载完了（先不考虑 CSS 阻塞 DOMContentLoaded 的情况），而 defer 的脚本还没有加载完，浏览器就会等，等到脚本加载完，执行完，再触发 DOMContentLoaded，放上一张图（取自在 devTool 下分析自己写的一个页面）

HTML很快就加载和解析完毕（CSS 在这里是动态加载的，不阻塞 DOMContentLoaded），jQuery 和main.js 的脚本是 defer 的， DOMContentLoaded（蓝线）一直在等，等到这两个脚本下载完并执行完，才触发了 DOMContentLoaded。从这个角度看来，defer 和把脚本放在 </body> 前真是没啥区别，只不过 defer 脚本位 于head 中，更早被读到，加载更早，而且不担心会被其他的脚本推迟下载开始的时间。

document.readyState

如果在整个页面加载完毕后设置 DOMContentLoaded 会发生什么呢？啥也没有，DOMContentLoaded不会被触发。

有一些情况我们无法确定页面上是否已经加载完毕，比如一个带有async的外部脚本的加载和执行是异步的（注：执行并不是异步的-_-）。在不同的网络状况下，脚本有可能是在页面加载完毕后执行也有可能是在页面加载完毕前执行，我们无法确定。所以我们需要知道页面加载的状况。

document.readyState 属性给了我们加载的信息，有三个可能的值：

• loading 加载 - document仍在加载。
• interactive 互动 - 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
• complete - 文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

所以可以检查 document.readyState 的状态，如果没有就绪可以选择挂载事件，如果已经就绪了就可以直接立即执行。像这样：

function work() { /*...*/ }if (document.readyState == 'loading') {document.addEventListener('DOMContentLoaded', work);
} else {work();
}

每当文档的加载状态改变的时候就有一个 readystatechange 事件被触发，所以我们可以打印所有的状态。

// current state
console.log(document.readyState);// print state changes
document.addEventListener('readystatechange', () => console.log(document.readyState));

readystatechange 是追踪页面加载的一个可选的方法，很早之前就已经出现了。不过现在很少被使用了，为了保持完整性还是介绍一下它。

readystatechange 的在各个事件中的执行顺序又是如何呢？

<script>function log(text) { /* output the time and message */ }log('initial readyState:' + document.readyState);document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));window.onload = () => log('window onload');
</script><iframe src="iframe.html" onload="log('iframe onload')"></iframe><img src="http://en.js.cx/clipart/train.gif" id="img">
<script>img.onload = () => log('img onload');
</script>

输出如下:

    [1] initial readyState:loading[2] readyState:interactive[2] DOMContentLoaded[3] iframe onload[4] readyState:complete[4] img onload[4] window onload

方括号中的数字表示他们发生的时间，真实的发生时间会更晚一点，不过相同数字的时间可以认为是在同一时刻被按顺序触发（误差在几毫秒之内）

• document.readyState 在DOMContentLoaded前一刻变为interactive，这两个事件可以认为是同时发生。
• document.readyState在所有资源加载完毕后（包括iframe和img）变成complete，我们可以看到complete、img.onload和window.onload几乎同时发生，区别就是window.onload在所有其他的load事件之后执行。

1.2 window.onload

window 对象上的 onload 事件在所有文件，包括 样式表，图片和其他资源下载完毕后触发。

下面的例子正确检测了图片的大小，因为 window.onload 会等待所有图片的加载。

<script>window.onload = function() {alert('Page loaded');// image is loaded at this timealert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);};
</script><img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

1.3 onbeforeunload / onunload

window.onunload

用户离开页面的时候，window对象上的 unload 事件会被触发，我们可以做一些不存在延迟的事情，比如关闭弹出的窗口，可是我们无法阻止用户转移到另一个页面上。

所以我们需要使用另一个事件 — onbeforeunload。

window.onbeforeunload

如果用户即将离开页面或者关闭窗口时，beforeunload事件将会被触发以进行额外的确认。

浏览器将显示返回的字符串，举个例子：

window.onbeforeunload = function() {return "There are unsaved changes. Leave now?";
};

有些浏览器像 Chrome 和火狐会忽略返回的字符串取而代之显示浏览器自身的文本，这是为了安全考虑，来保证用户不受到错误信息的误导。

1.4 示例：

示例代码：

 执行顺序
    1.alert(“outside.”);
    2.alert(“inline.”);
    3.alert(getComputedStyle(document.body).width);
    4.alert(“defer.”);
    5.readyState:interactive；
    6.alert(“DOM ready!”);
    7.readyState:interactive；
    8.alert(“load!”);
    9.alert(“beforeunload!”);
    10.alert(“unload!”);
*** alert(“async”)在什么时候执行？
有可能在alert(“defer.”)之前或之后，也有可能在alert(“DOM ready!”)之前或之后。

动态加载 script

动态 script 的默认行为是 async

• 1.异步，不会阻塞渲染；
• 2.先加载完成，先运行。

在 DOMContentLoaded 中访问 img 属性

*** DOMContentLoaded不会等待img加载完成，建议不要在DOMContentLoaded中访问img的相关属性。

外部样式是否会阻塞 DOMContentLoaded 的执行？

• 1. 一般情况，外部样式不会阻塞 DOMContentLoaded的执行；
• 2. 如果外部样式表后有script脚本访问样式属性，则会阻塞script脚本的执行(script脚本会等待外部样式加载完成后执行)，从而会阻塞DOMContentLoaded的执行。

readyState

如果我们在加载文档之后监听DOMContentLoaded，它永远不会执行；在需要的时候，我们可以监听readystatechange事件，通过document.readyState来获得文档的当前状态。

document.readyState三态：

• loading ： 文档正在加载中
• interactive ： 文档已经准备完全好
• complete ： 文档和所有资源加载完成

 *** document.readyState:interactive与DOMContentLoaded相同；document.readyState:complete与window.onload相同。

1.5 总结

window.addEventListener('resize', function() {console.log('获取或设置当前窗口的resize事件的事件处理函数')
})window.addEventListener('pageshow', function (e) {console.log('当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)')if (e.persisted) console.log('网页来自缓存.')
})document.onreadystatechange = function() {if (document.readyState == "loading")console.log('浏览器正在加载和处理此文档')if (document.readyState == "interactive")console.log('文档已被解析，但浏览器还在加载其中的链接资源(图像和媒体文件等)')if (document.readyState == "complete")console.log('文档已被解析，所有的资源也加载完毕')
}document.addEventListener('DOMContentLoaded', function() {console.log('当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。')
})window.addEventListener('load', function() {console.log('当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。')
})