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

时间 2020-06-14

标签简记 html 中经常使用的文档加载方法栏目 HTML 繁體版

原文原文链接

简介

最近对于文档加载方法有了新的理解，所以整理成一片简记，方便之后进行查阅。
先来一段Html，做为咱们研究的基础吧。css

<!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>

这就够了。html

Onload方法

支持的Html标签： <body> <frame> <frameset> <iframe> <img> <link> <script>
兼容性良好，全部主要浏览器都支持.onload()方法

说明：canvas

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

Onreadystatechange方法

该方法为document对象上的方法，当document对象上的readyState改变时触发

document对象的readyState一共有三个值浏览器

一、 loading 文档正在加载 
二、 interactive DOM树构建完成，能够访问到DOM里面的元素 
三、 complete 渲染树（Render Tree）构建完成 
四、 MDN中关于readyState只有三种状态（本人测试也是），但也有文章指出还有另外两种状态：     
    一、 uninitialized (未初始化) ：对象还没有初始化 
    二、 loaded (加载完毕) ：对象加载数据完成，
    (若是有同窗知道为何，请在下方评论好吗？谢谢)

说明缓存

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

DOMContentLoaded方法

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

Beforeunload方法

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

Unload方法

当文档或一个子资源正在被卸载时, 触发unload事件。

说明：触发此事件时，文档会处于一种特殊的状态框架

一、全部资源仍存在 (图片, iframe 等.) 
二、对于终端用户全部资源均不可见 
三、界面交互无效 (window.open, alert, confirm 等.)
四、错误不会中止卸载文档的过程

此事件为用户离开页面是触发的第三个事件，在 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，不知是什么缘由呢 ide

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