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

2020-01-20 11:02:40 阅读：275 来源： 互联网

标签：onload console 触发 window 简记 html 事件 document 加载

简介

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

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

标签：onload,console,触发,window,简记,html,事件,document,加载
来源： https://www.cnblogs.com/homehtml/p/12217063.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9