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

Posted 2020-10-10 Shapeying

前言

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

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‘。