页面加载时触发的事件及顺序页面加载时触发的事件及顺序

前言
页面加载时，大致可以分为以下几个步骤：
1.开始解析HTML文档结构
2.加载外部样式表及JavaScript脚本
3.解析执行JavaScript脚本
4.DOM树渲染完成
5.加载未完成的外部资源（如图片）
6.页面加载成功
整个过程中触发的常用的事件
document.readystatechange事件 document.readyState 属性描述了文档的加载状态，在整个加载过程中 document.readyState会不断变化，每次变化都会触发readystatechange事件。
readyState 有以下状态：

loading 加载，document 仍在加载。
interactive 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete 完成文档和所有子资源已完成加载。状态表示 window.load 事件即将被触发。

document.DOMContentLoaded事件 DOM树渲染完成时触发DOMContentLoaded事件，此时可能外部资源还在加载。 jquery中的ready事件就是同样的效果
window.load事件所有的资源全部加载完成会触发window 的 load事件。
【页面加载时触发的事件及顺序】所以在只需要文档结构加载完成就可以执行的脚本，可以监听DOMContentLoaded ；
需要所有内容都加载完成才能执行的脚本，要监听window.onload 或者 document.readyState === 'complete'。