【基础篇1】JavaScript页面生命周期

各位看官老爷，是否在框架横行的时代，忽略了原生js的方法。今天给大家带来一期html页面生命周期的分享。

页面生命周期方法

HTML 页面的生命周期包含四个重要事件：

事件	说明	应用场景
DOMContentLoaded	浏览器已完全加载 HTML，并构建了 DOM 树，但诸如 <img> 和样式表之类的外部资源可能尚未加载完成	DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口
load	浏览器不仅加载完成了 HTML，还加载完成了所有外部资源	外部资源已加载完成，样式已被应用，图片大小也已知了
beforeunload	当用户正在离开页面时触发	用户正在离开，我们可以检查用户是否保存了更改，并询问他是否真的要离开
unload	当用户正在离开页面时触发	用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据

readyState

Document.readyState 属性描述了 document 的加载状态。

• loading：正在加载状态，document 仍在加载中
• interactive：可交互状态，正在加载状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载
• complete：完成状态，文档和所有子资源已完成加载，表示状态 load 状态的事件即将被触发

readystatechange

readystatechange 事件是跟踪文档加载状态的另一种机制，会在状态发生改变时触发，因此我们可以打印所有这些状态：

// 当前状态
console.log('document.readyState');

// 状态改变时打印到调试台中
document.addEventListener('readystatechange', () => console.log(document.readyState));

DOMContentLoaded

DOMContentLoaded 事件发生在 document 对象上。

我们必须使用 addEventListener 来捕获它：

document.addEventListener('DOMContentLoaded', () => {
   });

示例：

<script type="text/javascript">
  function ready() {
     
    console.log('DOM is ready.');

    const img