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

标签：script   监听   res   区分   blog   内容   ima   class   cti   

前言

　　页面加载时，大致可以分为以下几个步骤：

1. 　　开始解析HTML文档结构
2. 　　加载外部样式表及JavaScript脚本
3. 　　解析执行JavaScript脚本
4. 　　DOM树渲染完成
5. 　　加载未完成的外部资源（如 图片）
6.        页面加载成功

　　那么在这整个过程中触发了哪些常用的事件呢？

document readystatechange事件

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

　　readyState 有以下状态：

　　　　loading / 加载document 仍在加载。

　　　　interactive / 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

　　　　complete / 完成T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

　　比如说在步骤2的时候对应 interactive   步骤5之后对应complete ，都会触发readystatechange事件。

　　PS:文档，图片等加载时的readyState 和 XMLHttpRequest.readyState 是不一样的。要注意区分

document DOMContentLoaded事件

　　DOM树渲染完成时触发DOMContentLoaded事件，此时可能外部资源还在加载。 jquery中的ready事件就是同样的效果

window load事件

　　所有的资源全部加载完成会触发window 的 load事件。

　　doucment 的load事件无法触发，但是MDN上却有这个事件？求大神指导！！！

实例

  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <script type="text/javascript">
    console.log(‘resolve body JavaScript‘);
   
    window.addEventListener(‘load‘,function(){
      console.log(‘window load‘);
    })

    document.addEventListener(‘readystatechange‘,function(){
      console.log(‘document ‘ + document.readyState);
    })

    document.addEventListener(‘DOMContentLoaded‘,function(){
      console.log(‘document DOMContentLoaded‘);
    })
    //document 没有load事件??
    document.addEventListener(‘load‘,function(){
      console.log(‘document load‘);
    })
  </script>

　　在chrome中的日志输出如下：

　　resolve body JavaScript --> document interactive -->  document DOMContentLoaded --> document complete -->  window load 

　　完全符合预期有木有。所以在只需要文档结构加载完成就可以执行的脚本，可以监听DOMContentLoaded ；需要所有内容都加载完成才能执行的脚本，要监听window.onload  或者 document.readyState === ‘complete‘。　　

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

标签：script   监听   res   区分   blog   内容   ima   class   cti   

原文地址：http://www.cnblogs.com/shapeY/p/7662406.html