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

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

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

readyState的值的变化：

• loading（加载）文档被加载中；
• loaded（加载完毕）文档数据记载完毕
• interactive（交互）文档结束加载并且被解析，可以操作对象，但部分还没有加载完成；如图像，样式表和框架之类的子资源仍然在加载。
• 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文档完全加载');
        })

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

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

DOMContentLoaded：当初始HTML文档加载并解析之后触发，无需要等待样式、图片、子框架结束。

load：当一个资源以及依赖的资源结束加载时触发（只有当一个页面完全加载时才触发），从这里可以看到需要等待资源的结束加载。

readystatechange：描述document的loading状态。

beforeunload：当浏览器窗口，文档或其资源将要卸载时，会触发。如果处理函数为Event对象的return Value属性赋值非空字符串，浏览器会弹出一个对话框，来询问用户是否确定要离开当前页面。

unload：当文档或一个子资源将要被卸载时，在beforeunload、pagehide两个事件之后触发。此时文档会处于一个待定的状态：所有资源仍存在；对于终端用户所有资源均不可见；界面交互无效；错误不会停止卸载文档的过程。