https://zh.javascript.info/onload-ondomcontentloaded

• DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。

  • DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口

  • 如果文档加载完毕后才设置DOMContentLoaded 回调, 那么永远都不会执行. 当不确定使用DOMContentLoaded 是否合适时, 可以利用document.readyState

    // 如果DOMContentLoaded 还没触发, 那么设置回调
    // 如果已经触发, 则直接执行
    
    function work() { /*...*/ }
    
    if (document.readyState == 'loading') {
      // 仍在加载，等待事件
      document.addEventListener('DOMContentLoaded', work);
    } else {
      // DOM 已就绪！
      work();
    }
    

• load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

  • 外部资源已加载完成，样式已被应用，图片大小也已知了

• beforeunload/unload —— 当用户正在离开页面时

  • beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
  • unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

document.readyState 的值是下列三者之一

• loading —— 文档正在被加载。
• interactive —— 文档被全部读取。
  • 文档已被解析完成，与 DOMContentLoaded 几乎同时发生，但是在 DOMContentLoaded 之前发生。
• complete —— 文档被全部读取，并且所有资源（例如图片等）都已加载完成。
  • 文档和资源均已加载完成，与 window.onload 几乎同时发生，但是在 window.onload 之前发生。

当document.readyState 的值改变时, 会触发readystatechange 事件

document.addEventListener(
	'readystatechange',
	() => console.log(document.readyState)
);