页面生命周期：DOMContentLoaded，load，beforeunload，unload —javascript.info

    HTML 页面的生命周期包含三个重要事件：

    • DOMContentLoaded—— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 页面生命周期 - 图1 和样式表之类的外部资源可能尚未加载完成。
    • load—— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
    • beforeunload/unload—— 当用户正在离开页面时。

    每个事件都是有用的：

    • DOMContentLoaded事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
    • load事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
    • beforeunload事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
    • unload事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

    页面生命周期事件：

    • 当 DOM 准备就绪时，document上的 DOMContentLoaded事件就会被触发。在这个阶段，我们可以将 JavaScript 应用于元素。

      • 诸如 或 之类的脚本会阻塞 DOMContentLoaded，浏览器将等待它们执行结束。
      • 图片和其他资源仍然可以继续被加载。

    • 当页面和所有资源都加载完成时，window上的 load事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。

    • 当用户想要离开页面时，window上的 beforeunload事件就会被触发。如果我们取消这个事件，浏览器就会询问我们是否真的要离开（例如，我们有未保存的更改）。

    • 当用户最终离开时，window上的unload 事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制，它很少被使用。我们可以使用 navigator.sendBeacon 来发送网络请求。

    • **document.readyState**是文档的当前状态，可以在**readystatechange**事件中跟踪状态更改：

      • **—— 文档正在被加载。
      • **interactive**—— 文档已被解析完成，与 **DOMContentLoaded**几乎同时发生，但是在 DOMContentLoaded 之前发生。
      • **complete**—— 文档和资源均已加载完成，与**window.onload** 几乎同时发生，但是在 window.onload 之前发生。
    1. <script>
    2.   log('initial readyState:' + document.readyState);
    4.   document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
    5.   document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));
    7.   window.onload = () => log('window onload');
    8. </script>
    10. <iframe src="iframe.html" onload="log('iframe onload')"></iframe>
    12. <img src="http://en.js.cx/clipart/train.gif" id="img">
    13. <script>
    14.   img.onload = () => log('img onload');
    15. </script>

    加载顺序 [1]initial readyState:loading

    [2] readyState:interactive [2] DOMContentLoaded

    [3] iframe onload

    [4] img onload [4] readyState:complete [4] window onload