Web 頁面的生命周期是指從瀏覽器開始加載頁面資源到頁面被卸載的整個過程。在這個過程中，瀏覽器會觸發一系列事件，開發者可以通過監聽這些事件來控制頁面的行為、優化性能或實現特定功能。本文將深入解析 DOMContentLoaded、load、beforeunload 和 unload 這四個關鍵事件的機制、順序及最佳實踐。

一、頁面生命周期總覽

1. 加載階段：

• 瀏覽器解析 HTML，構建 DOM 樹和 CSSOM 樹，合并為渲染樹（Render Tree）。
• 解析過程中遇到 <script> 標簽會阻塞渲染（除非標記為異步/ defer）。
• DOMContentLoaded 和 load 事件在此階段觸發。

2. 卸載階段：

• 用戶關閉頁面或導航到新頁面時觸發。
• beforeunload 和 unload 事件在此階段觸發。

二、DOMContentLoaded 事件：DOM 就緒的信號

2.1 事件定義與觸發時機

• 定義：當瀏覽器完成 DOM 樹的構建時觸發，此時 CSSOM 可能尚未處理完畢，圖片、視頻等資源可能仍在加載中。
• 觸發時機：

1. HTML 解析完成，DOM 樹構建完畢。
2. 異步腳本（async/defer）可能尚未執行，同步腳本（無標記）會阻塞 DOMContentLoaded 的觸發。

2.2 核心用途

（1）DOM 操作的最佳時機：

document.addEventListener('DOMContentLoaded', () => {
  const button = document.createElement('button');
  button.textContent = 'Click me';
  document.body.appendChild(button);
});

（2）提前執行非阻塞邏輯：

• 初始化 UI 交互（如事件綁定）。
• 加載非關鍵資源（如非阻塞腳本）。

（3）與腳本執行的關系：

• 同步腳本（<script>）會阻塞 DOMContentLoaded：

<!-- 以下腳本會阻塞 DOMContentLoaded -->
<script>
  // 耗時操作
</script>

• 異步腳本（async）可能在 DOMContentLoaded 之后執行：

<script async src="async-script.js"></script>

2.3 性能優化實踐

• 避免阻塞解析：

將 <script> 標簽置于 </body> 前，或使用 defer/async。

• 分階段初始化：

// 優先初始化關鍵交互，非關鍵邏輯延遲執行
document.addEventListener('DOMContentLoaded', () => {
  initCriticalUI(); // 立即執行
  setTimeout(initNonCritical, 0); // 放入事件循環，避免阻塞
});

三、load 事件：所有資源加載完成的標志

3.1 事件定義與觸發時機

• 定義：當頁面的所有資源（包括 DOM、CSS、圖片、字體、視頻等）都加載完成時觸發。
• 觸發時機：

DOMContentLoaded → 樣式表加載 → 圖片/字體加載 → load。

3.2 核心用途

（1）統計完整加載時間：

window.addEventListener('load', () => {
  const loadTime = performance.now() - performance.timing.navigationStart;
  console.log(`頁面加載完成，耗時 ${loadTime}ms`);
});

（2）依賴完整資源的操作：

• 圖片加載完成后的布局調整：

window.addEventListener('load', () => {
  const img = document.querySelector('img');
  console.log(`圖片寬度：${img.offsetWidth}`); // 確保獲取正確尺寸
});

（3）與 DOMContentLoaded 的對比：

3.3 注意事項

• 避免過度使用：現代瀏覽器優化后，load 事件觸發較晚，應優先使用 DOMContentLoaded。
• 兼容性：所有瀏覽器均支持，但移動端可能因緩存機制觸發時機不一致。

四、beforeunload 事件：阻止頁面卸載的最后機會

4.1 事件定義與觸發時機

• 定義：在頁面即將卸載（如用戶關閉標簽頁、刷新頁面或導航到新頁面）時觸發，用于詢問用戶是否離開。
• 觸發時機：

用戶操作導致頁面卸載（如點擊鏈接、關閉窗口）。

調用 window.close() 或 location.href 改變時。

4.2 核心用途

• 提示用戶保存未提交數據：

window.addEventListener('beforeunload', (event) => {
  if (isFormDirty) {
    event.preventDefault(); // 阻止默認卸載行為
    event.returnValue = '是否保存更改？'; // 瀏覽器可能顯示提示對話框
    return '是否保存更改？'; // 部分瀏覽器需要返回字符串
  }
});

• 統計用戶離開意圖：

window.addEventListener('beforeunload', () => {
  analytics.track('用戶離開頁面'); // 使用同步 Beacon API 發送數據
});

4.3 瀏覽器行為差異

• 自定義提示的限制：

Chrome、Firefox 會顯示統一的提示，而非開發者定義的字符串。

Safari 會顯示開發者返回的字符串（需返回值）。

• 禁止濫用：
• Chrome 會限制頻繁觸發 beforeunload 的頁面，避免干擾用戶。

4.4 最佳實踐

• 僅在必要時使用：

檢測表單修改（input 的 change 事件記錄臟狀態）。

避免在普通頁面中強制彈出提示。

• 使用 Beacon API 發送數據：

window.addEventListener('beforeunload', () => {
  navigator.sendBeacon('/analytics', JSON.stringify({ action: 'leave' }));
});

五、unload 事件：資源清理與數據上報

5.1 事件定義與觸發時機

• 定義：在頁面即將被卸載時觸發，此時頁面仍可見，但即將被銷毀。
• 觸發時機：

beforeunload 事件處理完成后觸發。

無法阻止頁面卸載，僅用于資源釋放。

5.2 核心用途

（1）釋放資源：

• 移除事件監聽器：

window.addEventListener('unload', () => {
  document.removeEventListener('click', onClick);
});

• 停止定時器：

let timer = setInterval(update, 1000);
window.addEventListener('unload', () => {
  clearInterval(timer);
});

（2）發送統計數據：

• 同步 XHR（僅限緊急數據）：

window.addEventListener('unload', () => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/log');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({ event: 'unload' })); // 可能被瀏覽器取消
});

• 推薦：Beacon API：

window.addEventListener('unload', () => {
  navigator.sendBeacon('/log', 'event=unload'); // 可靠的異步發送
});

5.3 限制與注意事項

• 無法執行異步操作：

setTimeout、Promise 等異步任務可能不會執行。

• 安全性限制：
• 無法操作 DOM 或打開新窗口。
• 兼容性：
• 所有瀏覽器支持，但移動端可能提前終止事件處理。

六、事件執行順序與異常場景

6.1 正常執行順序

（1）加載階段：

解析 HTML → DOMContentLoaded → 資源加載完成 → load

（2）卸載階段：

beforeunload → unload → 頁面卸載

6.2 異常場景處理

1. 頁面刷新：

• 順序：beforeunload → unload → 重新加載 → DOMContentLoaded → load。

2. 瀏覽器崩潰：

• beforeunload 和 unload 可能不會觸發。

3. 跨頁面導航：

• 目標頁面的 DOMContentLoaded 會在原頁面的 unload 之后觸發。

6.3 事件順序驗證

// 測試事件順序
console.log('開始加載');

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

window.addEventListener('load', () => {
console.log('load');
});

window.addEventListener('beforeunload', () => {
console.log('beforeunload');
});

window.addEventListener('unload', () => {
console.log('unload');
});

// 輸出（正常加載時）：
// 開始加載 → DOMContentLoaded → load（資源加載后）
// 卸載時：beforeunload → unload

七、性能優化與最佳實踐

7.1 加載階段優化

1. 優先使用 DOMContentLoaded：

• 將非阻塞邏輯提前到 DOMContentLoaded 中執行，減少 load 事件的壓力。

2. 延遲加載非關鍵資源：

<link rel="stylesheet" href="critical.css">
<script defer src="non-critical.js"></script>

7.2 卸載階段優化

1. 謹慎使用 beforeunload：

• 僅在用戶可能未保存數據時觸發提示，避免濫用影響用戶體驗。

2. 使用 Beacon API 發送數據：

• 替代同步 XHR，確保統計數據可靠發送：

function log(event) {
  navigator.sendBeacon('/analytics', JSON.stringify(event));
}

7.3 錯誤處理

• 避免阻塞事件：

beforeunload 中避免復雜計算，否則可能導致頁面卡頓。

• 檢測瀏覽器支持：

if ('onbeforeunload' in window) {
  // 支持 beforeunload 事件
}

八、常見面試問題

8.1 DOMContentLoaded 和 load 事件的區別是什么？

• 觸發時機：

DOMContentLoaded 在 DOM 樹構建完成后觸發，不等待資源加載。

load 在所有資源（包括圖片、CSS 等）加載完成后觸發。

• 用途：
• DOMContentLoaded 用于 DOM 操作和提前初始化。
• load 用于統計完整加載時間或依賴資源的操作。

8.2 如何在頁面卸載時保存用戶數據？

• beforeunload 事件：

提示用戶保存數據，但受瀏覽器限制。

• unload 事件：
• 使用 navigator.sendBeacon() 異步發送數據，確保可靠性。

8.3 為什么 beforeunload 事件的提示對話框越來越難自定義？

• 瀏覽器安全策略：為防止惡意網站濫用提示干擾用戶，Chrome、Firefox 等瀏覽器統一了提示內容，不再顯示開發者自定義的字符串。

8.4 事件執行順序是怎樣的？

1. 加載階段：DOMContentLoaded → load。
2. 卸載階段：beforeunload → unload。

九、總結

實踐建議：

• 在 DOMContentLoaded 中完成核心 UI 初始化，在 load 中處理資源依賴任務。
• beforeunload 僅用于必要的用戶提示，unload 中使用 Beacon API 發送輕量級數據。
• 關注瀏覽器策略變化，優先使用標準事件和現代 API（如 requestIdleCallback）優化生命周期管理。

通過深入理解頁面生命周期事件，開發者可以更精準地控制頁面行為，提升用戶體驗，同時避免性能瓶頸和安全隱患。