zoukankan      html  css  js  c++  java
  • 页面加载时触发的事件及顺序

    前言

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

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

      

  • 相关阅读:
    Java8 Comparator 排序方法
    IDEA自动清理优化import包
    图灵的文章“Computing machinery and intelligence”译文
    NLP第一课(我也是才开始学)
    java面试基础篇(一)
    python基本排序算法
    python基础面试题整理---从零开始 每天十题(04)
    python基础面试题整理---从零开始 每天十题(03)
    python基础面试题整理---从零开始 每天十题(02)
    python基础面试题整理---从零开始 每天十题(01)
  • 原文地址:https://www.cnblogs.com/shapeY/p/7662406.html
Copyright © 2011-2022 走看看