简记html中常用的文档加载方法

简介

最近对于文档加载方法有了新的理解,因此整理成一片简记,方便以后进行查阅。
先来一段Html,作为我们研究的基础吧。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./canvas.css">
  <title></title>
</head>

<body>
  <img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=f8a24d9b9545d688b70fbaf6c5ab167b/5bafa40f4bfbfbed903bb2d77ff0f736afc31f33.jpg" alt="">
  <script>
    var img = document.querySelector("img");
    var body = document.querySelector("body");
    var css = document.querySelector("link");

    // 为了了解DOM树和渲染树构建完成后触发的事件,设置css的onload事件
    css.addEventListener("load", function() {
      console.log("link.onload");
    })

    // onreadystatechange为监听document的readyState属性的事件
    document.addEventListener("readystatechange", function() {
      // 在此处不会监听到loading状态
      if (document.readyState == "loading")
        console.log(document.readyState);
      // interactive 为DOM树构建完成后触发
      if (document.readyState == "interactive")
        console.log(document.readyState);
      // complete为渲染树构建完成后触发
      if (document.readyState == "complete")
        console.log(document.readyState);
    })
    // 一下为监听loading状态
    document.readyState == "loading" && console.log("loading")

    // 设置图片的onload事件
    img.addEventListener("load", function() {
      console.log("img.onload");
    });

    //==================详细对比window.onload()与body.onload()=====================
    // body的onload事件实际就是window的onload事件
    body.onload = function() {
      console.log("body.onload");
    }
    window.addEventListener("load", function() {
      console.log("window.onload");
    });
    body.addEventListener("load", function() {
      console.log("body.onload");
    });

    // 对document对象设置监听DOMContentLoaded方法
    document.addEventListener("DOMContentLoaded", function(event) {
      console.log("document.DOMContentLoaded");
    });

    // 设置监听beforeunload事件,为用户离开页面时第一个触发的事件
    window.addEventListener("beforeunload事件", function(event) {
      console.log("window.beforeunload");
    });

    // 设置监听pagehide事件,为用户离开页面时第二个触发的事件
    window.addEventListener("pagehide", function(event) {
      console.log("window.pagehide");
      console.log(event.persisted)
    });

    // 设置监听unload事件,为用户离开页面时第三个触发的事件
    window.addEventListener("unload", function(event) {
      console.log("window.unload");
    });

    // 设置pageshow事件,为用户加载页面时触发的事件
    window.addEventListener('pageshow', function(event) {
      console.log("pageshow");
      console.log(event.persisted)
    });
  </script>
</body>
</html>

这就够了。

Onload方法

  • 支持的Html标签: <body> <frame> <frameset> <iframe> <img> <link> <script>
  • 兼容性良好,所有主要浏览器都支持.onload()方法
  • 说明:

      1、 window.onload() 为在全部文档加载完成后触发,包括页面的css、js和图片资源加载完成
      2、 img.onload() 方法为在图片加载完成后触发,因此img.onload() 要优先于window.onload(),其次如果是从缓存中读取到的图片,则不会触发该方法  
      3、 body.onload() 方法设置addEventListener监听load事件无效,会与window.onload()方法冲突,同时声明二者,后声明的会覆盖前者,
          其次是与window.addEventListener("load", function() {} )不会冲突,但是会影响执行顺序,先定义先执行,
          最后是我的一点观点body.onload()实质就是window.onload()方法     
    

Onreadystatechange方法

  • 该方法为document对象上的方法,当document对象上的readyState改变时触发
  • document对象的readyState一共有三个值

    1、 loading 文档正在加载 
    2、 interactive DOM树构建完成,可以访问到DOM里面的元素 
    3、 complete 渲染树(Render Tree)构建完成 
    4、 MDN中关于readyState只有三种状态(本人测试也是),但也有文章指出还有另外两种状态:     
        1、 uninitialized (未初始化) :对象尚未初始化 
        2、 loaded (加载完毕) :对象加载数据完成,
        (如果有同学知道为什么,请在下方评论好吗?谢谢)        
  • 说明

    1、设置document.onreadystatechange事件,在此函数中没有监听到loading状态 
    2、interactive 状态为DOM树构建完成,在图片加载完成前就会触发此状态,其次此状态要比document对象的另外一个事件DOMContentLoaded触发稍早   
    3、complete 状态为Render Tree构建完成,在图片以及样式表文件加载完成前就会触发此状态
    
    

DOMContentLoaded方法

  • 当初始HTML文档被完全加载和解析时,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载,即DOM树构建完成。
  • 此状态为DOM树构建完成后触发,和document.readyState=="interactive"一样,但在其之后触发
  • 兼容性:IE9以上可用

Beforeunload方法

  • 当浏览器窗口,文档或其资源将要卸载时,会触发.beforeunload()事件。
  • 如果处理函数为Event对象的returnValue属性赋值非空字符串,浏览器会弹出一个对话框,来询问用户是否确定要离开当前页面。没有赋值时,该事件不做任何响应。
  • 即此函数在页面第一次加载时不会触发,当用户要离开此页面或者关闭浏览器等操作时会被触发,为用户将要离开时的第一个触发的事件
  • 兼容性良好

Unload方法

  • 当文档或一个子资源正在被卸载时, 触发unload事件。
  • 说明:触发此事件时,文档会处于一种特殊的状态

    1、所有资源仍存在 (图片, iframe 等.) 
    2、对于终端用户所有资源均不可见 
    3、界面交互无效 (window.open, alert, confirm 等.)
    4、错误不会停止卸载文档的过程 
  • 此事件为用户离开页面是触发的第三个事件,在 pagehide 事件触发后触发
  • 此事件在触发后会导致页面不被bfcache缓存
  • 兼容性良好

Pagehide方法

  • 在用户离开页面时触发的第二个事件,在.beforeunload()事件触发后触发
  • 此事件可以用来替换.unload()事件,使得页面确保被缓存,要考虑浏览器的兼容性,
  • 通过对监听此事件的event对象的persisted属性,可以获知页面是否从bfcache(FF和Opera提供的往返缓存)加载的
  • 兼容性:IE11

Pageshow方法

  • 用户在打开页面时就会触发此方法,与.onload()事件类似,但是.onpageshow()在每次加载页面时都会被触发,而window.onload()方法在缓存中加载页面时将不会被触发(火狐浏览器1.5版本)
  • 此事件可以用来替换window.onload()事件,使得页面加载事件确保被触发,要考虑浏览器的兼容性
  • 此事件在window.onload()事件后触发
  • 通过对监听此事件的event对象的persisted属性,可以获知页面是否从bfcache(FF和Opera提供的往返缓存)加载的
  • 兼容性:IE11

备注

一火狐的这篇文章提到了如何使用pagehidepageshow方法,但是MDN中没有关于pagehidepageshow的详细说明,所以大家仅作了解即可
二是在讨论pagehidepageshow方法时,与这篇文章的博主一样, 我得到的event.persisted属性始终为false,不知是什么原因呢

这篇文章仅是个人的一篇笔记,如果你发现本文存在不严谨的或者错误的地方请轻喷!谢谢。

    原文作者:could
    原文地址: https://segmentfault.com/a/1190000010463333
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞