在前端开发中，onLoad 和 onDOMContentLoaded 是两个常见的事件，它们分别代表了不同的页面加载时机。理解这两个事件的执行时机对于优化页面加载性能和实现交互效果非常重要。
onLoad 事件
onLoad 事件是指页面和所有依赖的资源（如图片、样式表、脚本等）都加载完毕时触发。这个事件通常用于确保页面的内容和所有资源都完全加载完毕之后再执行某些操作。
onLoad 事件在页面的所有资源（包括图片、样式表、脚本文件等）完全加载后触发。它会等到 HTML 文档和所有外部资源加载完毕并渲染完成后才触发。因此，window.onload 事件确保页面及其所有资源都已准备好。
如下代码所示：
window.onload = function () {
console.log('页面及所有资源都已加载完成');
};如果页面包含大量的外部资源（如大图片、视频或其他多媒体文件），则 onLoad 事件会在所有这些资源加载完成后才会触发。因此，onLoad 事件的执行可能会有一定的延迟，尤其是在网络速度较慢的情况下。
onLoad 适用于处理需要等所有资源加载完成后的操作，比如执行一些资源初始化的工作，或者启动一个需要所有资源的动画。
onDOMContentLoaded 事件
onDOMContentLoaded 事件是在 DOM（文档对象模型）完全构建并且可操作时触发，但在图片、样式表等外部资源加载完成之前触发。换句话说，onDOMContentLoaded 事件会在 HTML 文档完全解析并且生成 DOM 树之后执行，但它不会等到所有的外部资源（如图片、样式表）都加载完毕。
onDOMContentLoaded 事件 在 HTML 文档完全解析并且 DOM 树构建完成后触发，通常发生在页面中所有的 <script> 标签执行完成之后。此时页面的 HTML 元素已经可以访问和操作，但一些外部资源（如图片、CSS 文件）可能还在加载中。
这个事件不依赖于图像、样式表、视频等资源的加载，因此会比 onLoad 事件更早触发。
如下代码所示：
document.addEventListener('DOMContentLoaded', function () {
console.log('DOM 已经完全加载并解析完毕，但外部资源可能还在加载');
});onDOMContentLoaded 事件不等外部资源（如图片、CSS、脚本等）加载完成，所以当你不依赖于这些外部资源时，使用 onDOMContentLoaded 可以更快地开始处理 DOM 操作或初始化工作。
onDOMContentLoaded 是在文档的 DOM 树构建完成后立即触发的，因此可以在这里执行大部分与 DOM 相关的操作，而不需要等待图片或其他外部资源加载完毕。
区别
如下代码所示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Moment</title>
</head>
<body>
<h1>Moment</h1>
<img
src="https://cdn.pixabay.com/photo/2025/02/03/21/01/forest-9380294_1280.jpg"
alt="Large Image"
/>
<script>
window.onload = function () {
console.log('所有资源已加载完毕，包括图片和样式！');
};
document.addEventListener('DOMContentLoaded', function () {
console.log('DOM 已加载完成，但外部资源可能还在加载');
});
</script>
</body>
</html>最终输出结果如下图所示：
| 事件 | 触发时机 | 依赖资源 | 适用场景 |
|---|---|---|---|
onLoad | 页面及所有外部资源（图片、脚本、样式等）加载完毕后触发 | 依赖于所有外部资源加载完成 | 需要所有资源加载完成后执行的操作，如加载动画、资源初始化等 |
onDOMContentLoaded | HTML 文档和 DOM 树解析完毕后立即触发 | 不依赖外部资源加载 | 操作 DOM 或初始化页面交互时使用，不依赖外部资源的加载 |
总结
onDOMContentLoaded 在 DOM 树解析完成后触发，适用于在不依赖外部资源的情况下进行 DOM 操作或初始化页面交互。而 onLoad 在页面和所有外部资源（如图片、样式、脚本等）加载完成后触发，适用于需要依赖所有资源已加载完成的操作，如初始化复杂的资源或执行页面动画。