页面生命周期

[coconilu]

页面事件的生命周期

1. DOMContentLoaded 事件在DOM树构建完毕后被触发，我们可以在这个阶段使用 JS 去访问元素。
   1.1. async 和 defer 的脚本可能还没有执行。
   1.2. 图片及其他资源文件可能还在下载中。
2. load 事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久。
3. beforeunload 在用户即将离开页面时触发，它返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开。
4. unload 在用户已经离开时触发，我们在这个阶段仅可以做一些没有延迟的操作，由于种种限制，很少被使用。
5. document.readyState 表征页面的加载状态，可以在 readystatechange 中追踪页面的变化状态：
   5.1. loading —— 页面正在加载中。
   5.2. interactive —— 页面解析完毕，时间上和 DOMContentLoaded 同时发生，不过顺序在它之前。
   5.3. complete —— 页面上的资源都已加载完毕，时间上和 window.onload 同时发生，不过顺序在他之前。

DOMContentLoaded 和脚本

在构建DOM树的时候，遇到标签<script>是会把渲染线程停下来并把执行权交给JS线程的，并把目前为止已经渲染的DOM（不包括这个<script>后面的DOM）交给JS线程，并且会等待前面的CSS样式表加载和渲染出CSSOM交给JS线程的。

但是有两个属性async和 defer可以优化这里，async表示脚本可以异步加载，defer表示脚本可以推迟到DOMCOntentLoaded事件之前执行。

参考

Page lifecycle: DOMContentLoaded, load, beforeunload, unload
[译]页面生命周期：DOMContentLoaded, load, beforeunload, unload解析