页面加载过程中触发的事件

readyState属性描述了文档的加载状态，在整个加载过程中document.readyState会不断变化，每次变化都会触发readystatechange事件。

readyState的值变化：

1. loading（加载）文档被加载时。
2. loaded（加载完毕）文档数据加载完毕。
3. interactive（交互）文档结束加载并且被解析，可以操作对象，但部分资源还没有加载完成；如图像，样式表和框架之类的子资源仍在加载
4. complete（完成）全部资源已经加载完成。状态表示window的load事件即将被触发。

执行顺序：

1. 页面加载开始，首先肯定是先发出加载资源的请求，加载未完成之前，不触发任何事件。

2. document加载结束并解析，此时css等其他资源未加载完成。
   此时readyState为'interactive'，表明document已经load并解析完成，触发readystatechange，然后触发DOMComtentLoaded（在大多数浏览器上的表现如此）。此时，加载完成且带有defer标记的脚本，会按顺序开始执行。

3. css、img等子资源加载完成之后，此时触发window.load事件。

4. 点击关闭标签或者刷新时，会依次触发beforeunload、unload事件。

document.onreadystatechange = function(){
   console.log(document.readyState);//描述文档被加载的状态
}
window.addEventListener('load',function(){
   console.log('window 所有资源加载完成');
})
document.addEventListener('DOMContentLoaded',function(){
   console.log('当初始html文档完全加载');
})
interactive
当初始html文档完全加载
complete
window 所有资源加载完成

交互阶段可能会早于也可能会晚于完成阶段出现；如当加载的外部资源较多时，交互阶段很可能会早于完成阶段。所以判断事件执行条件时要可以这样判断来取得先机。

document.onreadystatechange = function(){
    if(document.readyState=='interactive'||document.readyState=='complete')
    ..........
}

你要去做一个大人，不要回头，不要难过。

“我真的很喜欢你，像风走了八千里，不问归期。”