HTML 页面的生命周期包含三个重要事件：
- DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像
和样式表之类的外部资源可能尚未加载完成。
- load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
- beforeunload/unload —— 当用户正在离开页面时。 每个事件都是有用的：
- DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
- load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
- beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
- unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。
DOMContentLoaded 和脚本
当浏览器处理一个 HTML 文档，并在文档中遇到
因此，DOMContentLoaded 肯定在下面的这些脚本执行结束之后发生。
此规则有两个例外：
- 具有 async 特性（attribute）的脚本不会阻塞 DOMContentLoaded，稍后 我们会讲到。
- 使用 document.createElement('script') 动态生成并添加到网页的脚本也不会阻塞 DOMContentLoaded。
DOMContentLoaded 和样式
外部样式表不会影响 DOM，因此 DOMContentLoaded 不会等待它们。
但这里有一个陷阱。如果在样式后面有一个脚本，那么该脚本必须等待样式表加载完成。原因是，脚本可能想要获取元素的坐标和其他与样式相关的属性。因此，它必须等待样式加载完成。
当 DOMContentLoaded 等待脚本时，它现在也在等待脚本前面的样式。
window.onload
当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。
window.onunload
当访问者离开页面时，window 对象上的 unload 事件就会被触发。有一个值得注意的特殊情况是发送分析数据。假设我们收集有关页面使用情况的数据：鼠标点击，滚动，被查看的页面区域等。
自然地，当用户要离开的时候，我们希望通过 unload 事件将数据保存到我们的服务器上。
window.onbeforeunload
如果访问者触发了离开页面的导航（navigation）或试图关闭窗口，beforeunload 处理程序将要求进行更多确认。
如果我们要取消事件，浏览器会询问用户是否确定。
总结
页面生命周期事件：
-
当 DOM 准备就绪时，document 上的 DOMContentLoaded 事件就会被触发。在这个阶段，我们可以将 JavaScript 应用于元素。
- 诸如
<script>...</script>或<script src="..."></script>之类的脚本会阻塞 DOMContentLoaded，浏览器将等待它们执行结束。 - 图片和其他资源仍然可以继续被加载。
- 诸如
-
当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。
-
当用户想要离开页面时，window 上的 beforeunload 事件就会被触发。如果我们取消这个事件，浏览器就会询问我们是否真的要离开（例如，我们有未保存的更改）。
-
当用户最终离开时，window 上的 unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。我们可以使用 navigator.sendBeacon 来发送网络请求。
