页面生命周期：DOMContentLoaded，load，beforeunload，unload

  • DOMContentLoaded —— 浏览器完成全部 HTML 的加载，并构建 DOM 树，但像 <img> 和样式这样的外部资源可能还没有加载完成。
  • load —— 浏览器加载完所有资源，包括 HTML 文档，图像，样式等。
  • beforeunload/unload —— 当用户离开页面时。

每个事件都是有用的：

  • DOMContentLoaded 事件 —— DOM 已经准备好，因此事件处理器可以查找 DOM 节点，并初始化接口。
  • load 事件 —— 外部资源加载完成后，我们就可以应用样式表，获取图像大小等。
  • beforeunload 事件 —— 用户即将离开：我们可以检查用户是否保存了修改，并询问他是否真的要离开。
  • unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，比如发送统计数据。

DOMContentLoaded 事件发生在 document 对象上。
我们必须使用 addEventListener 来监听它：