JS的页面生命周期事件

今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾

生命周期事件

1. DOMContentLoaded, 浏览器完成HTML的加载, 并构建DOM树, 图片和样式等外部资源还没加载完成
2. load, 浏览器加载完所有资源, 包括HTML文档, 图片, 样式等
3. beforeunload, 用户即将离开, 用来检查用户是否保存了修改, 并询问是否真的要离开
4. unload, 用户几乎已经离开, 但是可以启动一些操作, 比如发送统计数据

1. DOMContentLoaded

DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上

2. window.onload

当包括样式、图像和其他资源的页面被全部加载时，window 对象上的 load 事件就会被触发

3. window.onunload

当访问者离开页面时，window 对象上的 unload 事件就会被触发。我们可以在那里做一些不涉及延迟的事件，比如关闭相关的弹出窗口

可以在用户离开时, 使用unload事件发送我们想要保存在服务器上的数据
参考https://w3c.github.io/beacon/, 可以使用navigator.sendBeacon(url, data)方法来发送数据

let analyticsData = { /* 收集了数据的对象 */ };
window.addEventListener("unload", function() {
  navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
};

• 请求以 POST 方式发送。
• 我们不仅能发送字符串，还能发送表单以及其他格式的数据，在 文章 "fetch-basics" 未找到 章节我们已有说明，但是通常情况下它是一个字符串化的对象。
• 数据大小限制在 64kb。
  当 sendBeacon 请求完成的时候，浏览器可能已经离开了文档，所以就没办法获取服务器的响应数据

4. window.onbeforeunload

如果访问中触发了离开页面的导航或试图关闭窗口，beforeunload 将要求提供更多的确认信息
如果我们取消该事件，浏览器将会询问用户是否确定

window.onbeforeunload = function() {
  return false
}

5. readyState

document.readyState 属性为我们提供了一些关于当前加载状态的信息

• loading —— 文档正在被加载。
• interactive —— 文档被全部读取。
• complete —— 文档被全部读取，并且所有的资源（图像之类的）都被加载。

function work() { /*...*/ }

if (document.readyState == 'loading') {
  // 正在加载，等待事件
  document.addEventListener('DOMContentLoaded', work);
} else {
  // DOM 已经准备就绪！
  work();
}