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

2024年2月28日 170次阅读 来源: could

简介

最近对于文档加载方法有了新的理解，因此整理成一片简记，方便以后进行查阅。
先来一段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

备注

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

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

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