總體而言，加載外部資源與頁面生命週期緊密相關(guān)，因?yàn)橥獠抠Y源加載會影響解析，渲染以及關(guān)鍵生命週期事件（例如Domcontentloaded和Load）的觸發(fā)。較短的外部資源加載時(shí)間，觸發(fā)了更快的生命週期事件。

就緒狀態(tài)和就緒狀態(tài)更改

readyState和readystatechange是兩個(gè)關(guān)鍵的瀏覽器屬性和事件，用於跟蹤文檔和網(wǎng)絡(luò)請求（例如AJAX請求）的狀態(tài)。它們幫助開發(fā)人員了解網(wǎng)頁加載過程的不同階段，並在這些階段執(zhí)行相應(yīng)的操作。它們主要用於文檔加載和網(wǎng)絡(luò)請求（例如 XMLHttpRequest）的上下文中。

文檔就緒狀態(tài)

document.readyState屬性代表文檔的當(dāng)前狀態(tài)，有三個(gè)可能的值，對應(yīng)不同的文檔加載階段：

1. loading：文檔仍在加載，並且仍在解析 HTML。 DOM 樹尚未完全構(gòu)建。外部資源（如圖像和樣式表）可能尚未加載或處理。
2. interactive：文檔的 HTML 已完全加載和解析，並且 DOM 樹已構(gòu)建。但是，樣式表、圖像和其他資源可能尚未完全加載。
3. 完整：頁面上的所有資源，包括 HTML、CSS、JavaScript、圖像和子框架，均已完全加載和處理。頁面已完全準(zhǔn)備就緒。

使用 document.readyState，開發(fā)者可以檢查文檔的加載狀態(tài)，並根據(jù)不同的狀態(tài)執(zhí)行相應(yīng)的操作。例如：

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

就緒狀態(tài)改變事件

readystatechange 事件在文檔的readyState改變時(shí)觸發(fā)。開發(fā)者可以監(jiān)聽readystatechange事件來執(zhí)行不同加載階段的特定邏輯。例如：

document.addEventListener('readystatechange', function () {
  if (document.readyState === 'interactive') {
    // The DOM tree has been completely built; DOM manipulation is now possible
    console.log('DOM is fully parsed');
  } else if (document.readyState === 'complete') {
    // The entire page, including all resources, is fully loaded
    console.log('Page and resources are fully loaded');
  }
});

下面是一個(gè) HTML 示例，說明瞭如何使用 document.readyState 和 readystatechange 來跟蹤不同的文檔加載階段。頁麵包含基本的HTML元素，並在不同的readyState階段顯示相應(yīng)的內(nèi)容或信息：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document ReadyState Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .status {
        font-size: 1.2em;
        color: #333;
        margin: 20px 0;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  
  
    <h1>Hello World</h1>
    <script>
      function updateStatus() {
        console.log(document.readyState);

        switch (document.readyState) {
          case 'loading':
            console.log('loading');
            break;
          case 'interactive':
            console.log('interactive');
            break;
          case 'complete':
            console.log('complete');
            break;
        }
      }

      updateStatus();

      document.addEventListener('readystatechange', updateStatus);
    </script>
  

上述代碼的輸出：

loading
interactive
complete

DOMContentLoaded 事件

DOMContentLoaded 事件是 HTML 文檔加載過程中瀏覽器觸發(fā)的關(guān)鍵事件。這意味著HTML文檔中的所有元素已經(jīng)被完全解析並且DOM樹已經(jīng)構(gòu)建完成。但是，圖像、樣式表和視頻等外部資源可能尚未完成加載。這是 DOMContentLoaded 和 load 事件之間的主要區(qū)別。

DOMContentLoaded 事件發(fā)生在文檔對像上，必須使用 addEventListener 捕獲：

document.addEventListener('DOMContentLoaded', () => {});

當(dāng)瀏覽器解析完 HTML 文檔並生成所有 DOM 節(jié)點(diǎn)時(shí)，會觸發(fā) DOMContentLoaded 事件。但是，它不需要完全加載外部資源（例如圖像、視頻、樣式表或字體文件）。

例如，如果頁麵包含大圖像，則 DOMContentLoaded 事件將在圖像完全加載之前觸發(fā)。至此，DOM樹就完全構(gòu)建完成了，開發(fā)者可以操作和訪問頁面上的DOM元素了。這是一個(gè)例子：

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

如果頁面上存在同步 JavaScript 文件（即沒有 async 或 defer 屬性的腳本），瀏覽器在遇到 <script> 時(shí)會暫停 HTML 解析。 tag，等待腳本執(zhí)行，然後繼續(xù)解析。這將延遲 DOMContentLoaded 事件的觸發(fā)。 <br> </script>

document.addEventListener('readystatechange', function () {
  if (document.readyState === 'interactive') {
    // The DOM tree has been completely built; DOM manipulation is now possible
    console.log('DOM is fully parsed');
  } else if (document.readyState === 'complete') {
    // The entire page, including all resources, is fully loaded
    console.log('Page and resources are fully loaded');
  }
});

輸出順序：

1. 庫已加載...
2. DOM 準(zhǔn)備好了！

不會阻止 DOMContentLoaded 事件的腳本包括：

• 具有 async 屬性的腳本
• 使用 document.createElement('script') 動(dòng)態(tài)添加腳本到網(wǎng)頁

window.onload 事件

當(dāng)整個(gè)頁面（包括樣式、圖像和其他資源）完全加載時(shí)，在 window 對像上觸發(fā) load 事件?？梢允褂?onload 屬性捕獲此事件。

這是一個(gè)正確顯示圖像大小的示例，因?yàn)?window.onload 會等待所有圖像完全加載：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document ReadyState Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .status {
        font-size: 1.2em;
        color: #333;
        margin: 20px 0;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  
  
    <h1>Hello World</h1>
    <script>
      function updateStatus() {
        console.log(document.readyState);

        switch (document.readyState) {
          case 'loading':
            console.log('loading');
            break;
          case 'interactive':
            console.log('interactive');
            break;
          case 'complete':
            console.log('complete');
            break;
        }
      }

      updateStatus();

      document.addEventListener('readystatechange', updateStatus);
    </script>
  

window.onbeforeunload 事件

beforeunload 事件在頁面即將被卸載之前觸發(fā)（例如，當(dāng)用戶導(dǎo)航到另一個(gè)頁面、關(guān)閉選項(xiàng)卡或刷新頁面時(shí)）。此事件允許開發(fā)人員提示用戶確認(rèn)是否確實(shí)要離開頁面。它通常用於提醒用戶保存未保存的數(shù)據(jù)或提醒他們潛在的數(shù)據(jù)丟失。

瀏覽器允許在此事件期間顯示一條短消息，詢問用戶是否確定要離開頁面。例如，當(dāng)用戶在未保存的表單中輸入內(nèi)容時(shí)，開發(fā)人員可以使用 beforeunload 來防止頁面意外關(guān)閉或刷新。

現(xiàn)代瀏覽器不顯示自定義提示消息。相反，它們顯示標(biāo)準(zhǔn)化的警告消息。這是一個(gè)例子：

loading
interactive
complete

當(dāng)用戶嘗試離開頁面時(shí)，此事件會觸發(fā)確認(rèn)對話框，詢問他們是要離開還是留在頁面上。

出於安全和用戶體驗(yàn)方面的考慮，瀏覽器會忽略大多數(shù)自定義消息，而是顯示通用對話框。過度使用 beforeunload 可能會降低用戶體驗(yàn)，因此僅應(yīng)在絕對必要時(shí)使用它，例如未保存數(shù)據(jù)的情況。

卸載事件

將觸發(fā)卸載事件。與前加載不同，卸載事件不能阻止用戶離開頁面。它主要用於執(zhí)行最終的清理任務(wù)，例如清除臨時(shí)數(shù)據(jù)，取消異步請求和發(fā)佈內(nèi)存。

>與前加載不同，卸載事件無法提示用戶。相反，它用於操作，例如關(guān)閉WebSocket連接，將數(shù)據(jù)保存到本地存儲或清除計(jì)時(shí)器。

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

>

HTML解析構(gòu)成了頁面生命週期的基礎(chǔ)，但它本身並不是JavaScript-Listenenable可依靠的生命週期事件。當(dāng)DOM樹完全構(gòu)造時(shí)，觸發(fā)DOMCONTENTLOAD事件，而在頁面上的所有資源都完全加載後，負(fù)載事件會觸發(fā)。 TERUNLOAD事件提示用戶確認(rèn)從頁面上瀏覽導(dǎo)航，並在頁面卸載期間使用卸載事件進(jìn)行資源清理。這些事件為開發(fā)人員提供了對頁面加載和卸載過程的控制，有助於提高用戶體驗(yàn)和頁面性能。

我們是等等，HTML 有生命週期嗎？，您是託管Node.js項(xiàng)目的最佳選擇。

leapcell是用於Web託管，異步任務(wù)和REDIS的下一個(gè)無服務(wù)器的平臺：

使用node.js，python，go或Rust開發(fā)。

>免費(fèi)部署無限項(xiàng)目
>僅用於使用付費(fèi) - 沒有請求，沒有收費(fèi)。

>無與倫比的成本效率

• >付費(fèi)，沒有閒置費(fèi)。
>