页面生命周期事件剖析_DOMContentLoaded与Load
DOMContentLoaded在DOM解析完成后触发，不等待资源加载，适合操作DOM；Load在所有资源加载完毕后触发，适用于依赖完整资源的场景。
当用户访问一个网页时，浏览器会经历一系列阶段来加载和渲染页面。在这个过程中，有两个关键的事件：DOMContentLoaded 和 Load。它们标志着页面加载的不同里程碑，理解它们的区别和触发时机，对优化页面性能和脚本执行时机非常有帮助。
DOMContentLoaded 事件
这个事件在HTML 文档完全加载并解析完毕后立即触发，不需要等待样式表、图片或子资源的加载完成。
这意味着 DOM 树已经建立，JavaScript 可以安全地访问和操作页面元素。
- 触发条件：DOM 构建完成
- 不等待：CSS、图片、字体等外部资源
- 适合场景：绑定事件监听、操作 DOM、初始化脚本
document.addEventListener('DOMContentLoaded', function() { ... }) 可确保你的 JS 在 DOM 准备好后运行，避免“找不到元素”的错误。
Load 事件
这个事件发生在整个页面及其所有依赖资源（如图片、样式表、字体等）全部加载完成后才触发。
它比 DOMContentLoaded 更晚被调用，适用于需要完整资源就绪的场景。
- 触发条件：页面及所有关联资源加载完成
- 等待：图片、CSS、JS、字体、iframe 等
- 适合场景：统计页面加载时间、处理图片尺寸、执行依赖图像的动画
window.addEventListener('load', function() { ... }) 中执行相关逻辑。
两者的主要区别
核心差异在于是否等待外部资源加载完成。
- DOMContentLoaded 更早触发，适合 DOM 操作
- Load 触发较晚，确保所有资源可用
- 如果页面有很多大图或慢资源，Load 可能延迟数秒
实际应用建议
根据需求选择合适的事件，可以提升用户体验和脚本可靠性。
- 普通交互脚本（如菜单展开、表单验证）使用 DOMContentLoaded
- 涉及图像测量、Canvas 渲染或性能监控的代码放在 Load 中
- 避免在 Load 中执行本可在 DOMContentLoaded 完成的任务，防止阻塞
基本上就这些。掌握这两个事件的时机，能让 JavaScript 更高效地与页面生命周期协同工作。
