深入探究 Web 页面生命周期：从加载到卸载的关键事件解析

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 的对比：

   事件	触发时资源状态	典型场景
   DOMContentLoaded	DOM 就绪，其他资源可能未加载	初始化 DOM 交互
   load	所有资源（含图片/CSS）加载完成	统计完整加载时间、调整依赖资源的布局

3.3 注意事项

• 避免过度使用：现代浏览器优化后，load 事件触发较晚，应优先使用 DOMContentLoaded。
• 兼容性：所有浏览器均支持，但移动端可能因缓存机制触发时机不一致。

四、beforeunload 事件：阻止页面卸载的最后机会

4.1 事件定义与触发时机

• 定义：在页面即将卸载（如用户关闭标签页、刷新页面或导航到新页面）时触发，用于询问用户是否离开。
• 触发时机：
  • 用户操作导致页面卸载（如点击链接、关闭窗口）。
  • 调用 window.close() 或 location.href 改变时。

4.2 核心用途

1. 提示用户保存未提交数据：

   window.addEventListener('beforeunload', (event) => {
     if (isFormDirty) {
       event.preventDefault(); // 阻止默认卸载行为
       event.returnValue = '是否保存更改？'; // 浏览器可能显示提示对话框
       return '是否保存更改？'; // 部分浏览器需要返回字符串
     }
   });
   

2. 统计用户离开意图：

   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）优化生命周期管理。

通过深入理解页面生命周期事件，开发者可以更精准地控制页面行为，提升用户体验，同时避免性能瓶颈和安全隐患。