JavaScript 页面生命周期事件

页面生命周期是现代Web开发中重要的概念，主要包括以下几个关键事件：

主要事件

1. DOMContentLoaded

   • 当HTML文档完全加载和解析完成（无需等待样式表、图像和子框架完成加载）时触发
   • 此时DOM树已经构建完成，可以安全地操作DOM元素
   • 通过document.addEventListener('DOMContentLoaded', handler)监听

2. load

   • 当整个页面（包括所有依赖资源如样式表、图片等）完全加载后触发
   • 表示页面已经完全准备好
   • 通过window.addEventListener('load', handler)监听

3. beforeunload

   • 在窗口、文档即将卸载时触发
   • 常用于防止用户意外离开页面（如未保存的表单数据）
   • 通过window.addEventListener('beforeunload', handler)监听
   • 必须设置event.returnValue或返回非空值才能显示确认对话框

4. unload

   • 当文档或子资源正在卸载时触发
   • 常用于发送分析数据或清理操作
   • 通过window.addEventListener('unload', handler)监听

执行顺序

1. DOMContentLoaded
2. load
3. beforeunload（页面关闭/刷新前）
4. unload（页面关闭/刷新时）

示例代码

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM已加载完成，可以操作DOM元素');
});

window.addEventListener('load', () => {
  console.log('所有资源已加载完成');
});

window.addEventListener('beforeunload', (event) => {
  // 现代浏览器需要同时设置returnValue和return
  event.preventDefault();
  return event.returnValue = '您有未保存的更改，确定要离开吗？';
});

window.addEventListener('unload', () => {
  // 发送分析数据或执行清理操作
  navigator.sendBeacon('/log', '页面卸载');
});

注意事项

• 使用beforeunload时，现代浏览器只会在用户与页面有交互后才会显示确认对话框
• unload事件中不适合执行耗时操作，因为页面即将关闭
• 对于SPA（单页应用），这些事件可能不会按预期触发，因为页面实际上没有重新加载