【JavaScript】页面加载事件详解

页面加载事件在前端开发中起着至关重要的作用。通过监听这些事件，开发者能够控制和优化页面的加载流程，确保资源正确加载并根据用户的需求执行相应的操作。本文将详细介绍 JavaScript 中常用的页面加载事件，以及如何在实际项目中高效地使用它们。

一、页面加载事件概述

1. 什么是页面加载事件？

页面加载事件（Page Load Events）是浏览器提供的事件，允许开发者在页面资源（HTML、CSS、JavaScript、图片等）加载的不同阶段执行特定操作。通过这些事件，开发者可以确保在页面完全准备好后执行脚本，或在页面未加载完毕前执行必要的预处理任务。

2. 页面加载事件的类型

在前端开发中，主要的页面加载事件包括：

• DOMContentLoaded：当 HTML 文档被完全加载和解析完成时触发，而不必等待样式表、图片和其他资源的加载。
• load：当页面的所有资源（包括图片、样式表、脚本等）加载完成后触发。
• beforeunload：在用户即将离开页面或刷新页面时触发，可以用来执行清理工作。
• unload：页面完全卸载时触发，这时可以执行一些最后的资源释放工作。

二、页面加载事件详解

1. DOMContentLoaded 事件

(1) 事件介绍

DOMContentLoaded 是页面加载事件中最早触发的一个，它仅在 HTML 被完全解析完毕后触发，而不需要等待外部资源如图片和样式表的加载完成。这个事件常用于提前执行某些 DOM 操作，因为此时文档结构已准备完毕。

(2) 代码示例

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 完全加载和解析');
  // 在此处执行 DOM 操作
});

(3) 使用场景

• 当你只需要确保 HTML 被正确解析时使用，例如设置页面上的初始状态或绑定事件处理程序。
• 适用于不依赖图片或外部资源的场景。

(4) 注意事项

尽管 DOMContentLoaded 事件比 load 事件触发得早，但它不保证外部资源（如图片）已加载完毕，因此如果你需要确保所有资源加载完成，DOMContentLoaded 可能不是最佳选择。

2. load 事件

(1) 事件介绍

load 事件会在页面的所有资源（包括图片、样式表、iframe 等）都加载完毕后触发。它是页面完全准备好进行交互的标志。

(2) 代码示例

window.addEventListener('load', function() {
  console.log('页面所有资源已加载');
  // 在此处执行与资源相关的操作
});

(3) 使用场景

• 适用于需要依赖图片或其他外部资源加载完成的场景，如计算图片的尺寸、启动动画或处理复杂布局等。
• 典型场景包括页面展示前的加载动画结束、初始化依赖外部资源的功能等。

(4) 注意事项

load 事件在所有资源都加载完毕后才触发，因此如果页面中有大量图片或其他资源，可能会导致 load 事件触发较晚，这会影响用户体验。

3. beforeunload 事件

(1) 事件介绍

beforeunload 事件在用户离开页面或刷新页面前触发，它允许开发者展示确认对话框，询问用户是否确定要离开页面。该事件通常用于避免用户在重要操作未保存时意外离开页面。

(2) 代码示例

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = ''; // 显示默认的离开确认提示
});

(3) 使用场景

• 在表单未提交、编辑内容未保存的情况下提示用户。
• 用于防止用户在操作关键任务时意外关闭页面。

(4) 注意事项

大多数现代浏览器会忽略自定义的提示文本，只显示默认的系统提示信息，因此仅能依赖 event.returnValue 设置离开确认。

4. unload 事件

(1) 事件介绍

unload 事件在页面即将卸载时触发，通常用于执行最后的清理工作，如移除事件监听器、保存用户数据等。

(2) 代码示例

window.addEventListener('unload', function() {
  console.log('页面卸载');
  // 执行清理操作
});

(3) 使用场景

• 用于释放与页面相关的资源，例如关闭 WebSocket 连接、清理缓存等。
• 适合单页应用（SPA）中在页面切换时的资源释放。

(4) 注意事项

由于页面即将卸载，unload 事件中的代码执行时间非常短。因此，应避免在 unload 事件中执行过多或耗时的操作。

三、页面加载事件的实际应用场景

1. 提高页面加载性能

通过合理使用 DOMContentLoaded 和 load 事件，开发者可以优化页面的加载流程，提升用户体验。例如，在 DOMContentLoaded 事件中执行页面布局和基本交互的初始化操作，在 load 事件中处理图片和动画加载，以实现分阶段加载。

document.addEventListener('DOMContentLoaded', function() {
  // 初始化基本交互
});

window.addEventListener('load', function() {
  // 加载图片和动画
});

2. 离开页面时提示保存

在富文本编辑器或表单中，用户可能会在编辑过程中离开页面。这时使用 beforeunload 事件可以有效提示用户保存重要内容，避免数据丢失。

window.addEventListener('beforeunload', function(event) {
  if (formIsDirty) {
    event.preventDefault();
    event.returnValue = '';
  }
});

3. 页面卸载时释放资源

对于 WebSocket 或其他持久连接应用，开发者可以使用 unload 事件在页面关闭时释放连接，避免资源泄露。

window.addEventListener('unload', function() {
  socket.close(); // 关闭 WebSocket 连接
});

四、页面加载事件的注意事项

1. 使用时机的选择

根据页面的具体需求，选择合适的加载事件。例如，如果只需要操作 DOM，DOMContentLoaded 足以应对；但如果需要确保所有外部资源加载完成，则应使用 load 事件。

2. 事件的清理

在处理 beforeunload 和 unload 事件时，确保对无效的事件处理器进行清理，以避免内存泄漏。对于单页应用中的路由切换，尤其需要注意清理未使用的监听器。

3. 页面性能优化

虽然 load 事件确保所有资源都加载完毕，但如果有大量的外部资源，页面的加载时间可能会延迟。因此，优化外部资源（如图片、脚本等）的加载顺序和方式，可以显著提升用户体验。

五、总结

页面加载事件为前端开发者提供了强大的工具来控制页面的加载和卸载流程。通过合理使用 DOMContentLoaded、load、beforeunload 和 unload 事件，开发者可以提升页面性能、提高用户体验，并确保在关键时刻执行必要的操作。

推荐：

• JavaScript
• react
• vue

---