浏览器页面生命周期你知道吗？

页面生命周期

我们知道，浏览器其实就是扮演着一个从服务器获取资源，并且加载渲染资源的一个角色，在一次用户打开浏览器访问页面，到退出页面离开浏览器的过程，就是浏览器页面的一个生命周期，在这个生命周期可以分为几个重要阶段，都有对应的钩子函数

• DOMContentLoaded
• load
• beforeunload
• unload

简单来讲，这个几个钩子函数，分别对应这下面几个阶段

• 页面的DOM树渲染完成，但样式，图片等资源加载未完成
• 页面所有资源加载完成
• 用户离开页面前
• 用户几乎已经离开了页面

如果想直观地感受下页面的生命周期，可以开浏览控制台的network，之后刷新下页面，就会看到如下的画面

可以看到蓝线和红线，下面也有说明蓝的代表DOMContentLoaded，红的代表load，且显示了对应的加载时间

DOMContentLoaded

这个事件是发生在document上的，但是不能这样用

<script type="text/javascript">
  document.onDOMContentLoaded =