簡記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

這篇文章僅是我的的一篇筆記，若是你發現本文存在不嚴謹的或者錯誤的地方請輕噴！謝謝。函數