一文讲清楚HTML页面生命周期，DOMContentoaded/load/unload/beforeunload等document和window的状态
- 作为一个前端开发者，当我们在开发一个web应用时，我们该清晰的知道一件事，那就是无论你使用没使用框架，vue也好，react也罢，或者原生开发，最终的本质目的都是在解决一个window窗口（页面）下渲染document元素的问题，只不过是思路不尽相同而已
- 那我们就需要明白window和docuemnt的关系
- window是什么，是窗口，是页面，我们点击打开一个新的标签就是一个窗口，一个window，一个页面，就有一个window对象被创建
- document是什么，是文档，什么文档，内容文档，什么内容，HTML内容，也就是说document表示这个页面窗口下的html文档内容
- 那就很清晰了，document是window的一个子集，因为一个窗口不仅包含html内容，还要包括地址栏，也就是location，还要包含浏览历史记录history，设备信息navigator，屏幕信息screen等等
- 大概是这样
window ├── document（页面内容DOM树） ├── location（地址栏信息） ├── history（浏览历史记录） ├── navigator（浏览器设备信息） ├── screen（屏幕显示信息） ├──alert()/confirm()（弹窗方法） ├──setTimeout()/setInterval()（定时器） └── 全局变量/全局函数（默认挂载到window上）- 所以window和document的生命周期总体来说肯定是window激活->document激活->document卸载->window卸载
- 那再来说我们需要关注什么，因为我们最终的目的是把html元素渲染到页面上，所以我们要考虑什么时候开始渲染，什么时候渲染完成等等，以便我们在各个阶段做出业务逻辑
- 所以需要一个状态，来标记html内容当前的渲染状态，这个变量就是readyState
- 他有三个状态，loading->interactive->complete
- 当window被打开，document开始加载至文档完全被解析完成，这个阶段document属于loading阶段
- document被解析完成至文档和资源全部被加载完，这个阶段document属于iteracive阶段
- document所有资源被加载完之后，就到了complete阶段
- 那我们怎么获取当前的文档转态呢，可以通过document.reayState来获取
- 同时，我们可以监听readyState的状态变化，来进行业务处理，通过document.addEventListener(‘readystatechange’,()=>{})来监听不同的状态变化
- 上面我们讲了document在不同阶段的三种状态
- 对于但一个页面来讲，document只是一部分，就像我们之前说的，他只是window的一部分，我们纵观全局，除了关心html有没有被渲染，我们还有考虑页面是否被关闭等
- 所以，就需要有宏观的事件来被回调，以便于我们知道当前页面的整体状态，这个就是页面的事件
- 首先，对于页面来讲，HTML开始加载，并解析构建DOM树，当DOM树构建完成（样式资源可能还未加载完成）这时候会触发DOMContentLoaded事件，表示浏览器已完成加载HTML，并构建DOM树。他跟interactive几乎同时发生，但是interactive在DOMContentLoaded之前完成，为什么，还是我们说的，interactive是针对document的，是子集，DOMContentLoaded是宏观的，所以先子集完成，再宏观完成。我们可以用document.addEventListener(‘DOMContentLoaded’,()=>{})来进行捕获
- 其次，img和样式资源等开始加载，并且全部加载完成，这时候会触发window的load事件，他跟conmplete几乎同时发生，但是complete在前，window的load事件在后，理由同上。我们可以用window.οnlοad=()=>{}来进行捕获
- 之后，如果页面有可能会被关闭，当然从业务场景来说两种可能，第一种是，用户点击关闭后直接关闭，当前页面没有啥需要保存的东西；第二种情况，页面上有用户输入的东西尚未提交保存，如果关闭可能造成数据丢失，那我们就需要对用户的关闭操作进行拦截并提示用户，是否最终选择关闭，这就需要劫持关闭事件
- 所以，页面关闭就会有两个事件，关闭和准备关闭，关闭就是关闭了，很好理解。准备关闭就是我们捕获到用户要关闭，但是先阻止关闭，提示用户二次选择。
- 所以就会有beforeunload事件，用户准备离开，我们检查数据是否进行了保存，然后二次询问是否真的需要离开，我们可以使用window.beforeunload=()=>{}来进行捕获
- 最后unload事件，用户几乎离开了，为什么几乎离开了，因为我们还可以做一些操作，比如发送数据统计，这就是我们前端埋点的常见实现方式，在unload事件处罚时，通过navigattor.sendBeacon来发送数据给服务端
