深入理解HTML页面生命周期：DOMContentLoaded, load, beforeunload, unload

本文主要探讨JavaScript页面的生命周期，重点介绍四个关键阶段：DOMContentLoaded、load、beforeunload和unload。HTML页面在浏览器加载过程中会经历这些阶段，每个阶段都有其特定的任务和用途。 1. **DOMContentLoaded**：这是第一个重要的生命周期事件，当浏览器解析并完成HTML文档的解析，DOM树构建完成，但此时外部资源如图片和样式表可能尚未下载完毕。开发者可以在这个阶段开始执行JavaScript代码，因为DOM已经就绪，可以对节点进行操作，例如： ```javascript document.addEventListener("DOMContentLoaded", function() { // 页面结构已准备好，可以访问DOM节点 alert('DOM已就绪'); // 图片可能还未加载，因此width和height为0 var img = document.getElementById('img'); alert(`图片大小：${img.offsetWidth}x${img.offsetHeight}`); }); ``` 尽管图像可能尚未加载，但开发者可以进行初步布局和交互。 2. **load**：这个事件标志着所有HTML和外部资源（如CSS、图片）都已成功加载完成。这时，样式已生效，图片大小已知，可以安全地执行依赖于这些资源的操作： ```javascript document.addEventListener("load", function() { // 所有资源都加载完毕，适合进行复杂的交互和样式调整 }); ``` 3. **beforeunload** 和 **unload**：这两个事件与用户离开页面相关。beforeunload在用户试图关闭窗口或切换到其他标签页时触发，提供了一个机会检查用户是否已保存更改并询问是否确认离开。而unload事件则在页面实际卸载前触发，通常用于清理临时数据或发送最后的数据统计： ```javascript window.addEventListener("beforeunload", function(event) { // 用户即将离开，检查并提示保存更改 if (confirm('确定要离开吗？')) { event.preventDefault(); // 阻止默认行为，如刷新页面 return ''; } }); window.addEventListener("unload", function() { // 页面卸载，可执行最后的数据记录或其他清理操作 }); ``` 了解这些页面生命周期事件有助于编写更高效、用户体验更好的JavaScript代码，确保在适当的时机执行必要的逻辑。