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

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

readyState的值变化：

1.loading（加载） 文档被加载时

2.loaded （加载完毕）文档数据加载完毕

3.interactive（交互）文档结束加载并且被解析，可以操作对象，但部分资源还没有加载完成；如图像，样式表和框架之类的子资源仍在加载

4.complete（完成） 全部资源已经加载完成。状态表示window的load 事件即将被触发。

 

执行顺序：

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

2. document加载结束并解析，此时css等其他资源未加载完成。

   此时readyState为'interactive'，表明document已经load并解析完成，触发 readystatechange，然后触发DOMContentLoaded(在大多数浏览器上的表现如此)。此时，加载完成且带有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')
            ..........
        }