面试官：window.onload 和 DOMContentLoaded 的区别

最新推荐文章于 2025-05-08 09:00:00 发布

@大迁世界

最新推荐文章于 2025-05-08 09:00:00 发布

阅读量1k

点赞数 22

本文链接：https://blog.youkuaiyun.com/qq449245884/article/details/146194462

版权

window.onload 和 DOMContentLoaded 都是 页面加载相关的事件，但它们触发的时机不同，主要区别如下：

📌 1. `DOMContentLoaded` 事件

当 HTML 完全解析并构建 DOM 后触发，但 不等待 CSS、图片、JS 资源加载完成。

触发时机：

只要 HTML 解析完成并构建了 DOM，就会触发 DOMContentLoaded。
不会等待 CSS、图片、iframe 加载完成，所以它的触发时间更早。

✅ 适用场景

希望尽早操作 DOM，例如动态修改页面结构、绑定事件监听器。
对图片、CSS 不依赖的 JS 操作，例如表单校验、事件监听等。

🔹 示例

document.addEventListener("DOMContentLoaded", function() {
  console.log("🌟 DOM 解析完毕！");
});

💡 输出时机：页面结构加载完成，但图片、CSS 可能还未加载完。

📌 2. `window.onload` 事件

当 HTML、CSS、JS、图片、iframe 及所有外部资源都加载完成后才触发。

触发时机：

等所有资源加载完成（包括 CSS、图片、iframe、视频等） 后才触发。
比 DOMContentLoaded 晚，尤其是如果页面有大量图片、视频时，window.onload 可能会很慢。

✅ 适用场景

需要确保所有资源都加载完毕，例如：
- 获取图片宽高
- 操作 canvas
- 计算 offsetWidth、offsetHeight
- 页面统计（如 Google Analytics）
- 依赖外部 API（如广告、第三方 SDK）

🔹 示例

window.onload = function() {
  console.log("✅ 所有资源加载完成！");
};

💡 输出时机：等页面所有资源加载完毕才触发，可能比 DOMContentLoaded 晚很多。

📊 3. `DOMContentLoaded` vs `window.onload` 触发顺序

事件	触发时机	依赖资源加载	适用场景
`DOMContentLoaded`	HTML 解析完成，DOM 构建完成	❌ 不等待 CSS/图片/iframe	适合尽早操作 DOM
`window.onload`	所有资源（HTML、CSS、JS、图片等）加载完成	✅ 需要等待所有资源	适合依赖图片/视频的操作

📌 4. 示例对比

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<script>
    document.addEventListener("DOMContentLoaded", function() {
      console.log("🚀 DOMContentLoaded 触发");
    });

    window.onload = function() {
      console.log("✅ window.onload 触发");
    };
  </script>
</head>
<body>
<h1>测试页面</h1>
<img src="https://via.placeholder.com/600x400" alt="测试图片">
</body>
</html>

可能的输出顺序

🚀 DOMContentLoaded 触发
✅ window.onload 触发

💡 DOMContentLoaded 先触发，因为它不等待图片加载。

💡 5. 面试官可能的追问

✅ 面试官：为什么 DOMContentLoaded 不会等待图片加载？
回答：因为 DOMContentLoaded 只需要 HTML 解析完成并构建 DOM，而不会等待图片、CSS 资源的加载。

✅ 面试官：什么时候必须使用 window.onload 而不是 DOMContentLoaded？
回答：

需要确保图片、CSS、iframe 资源加载完成 的场景，如：
- 获取图片尺寸（img.width）
- 操作 canvas（必须等图片加载完）
- 执行外部 API 或广告代码

✅ 面试官：如何在 DOMContentLoaded 之后监听 onload？
回答：

document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM 加载完成");
  window.onload = function() {
    console.log("所有资源加载完成");
  };
});

这样可以 先执行 DOM 操作，再等待资源加载。

🎯 总结

对比项	DOMContentLoaded	window.onload
触发时机	HTML 解析完毕，DOM 结构就绪	所有资源（HTML、CSS、图片等）加载完毕
是否等待 CSS 加载	❌ 不等待	✅ 等待
是否等待图片加载	❌ 不等待	✅ 等待
适用场景	绑定事件监听、修改 DOM	依赖图片、CSS、广告 SDK

最佳面试回答 🎯
"DOMContentLoaded 事件在 HTML 解析完成后触发，不会等待图片、CSS 资源加载，而 window.onload 需要等待所有资源加载完成才触发。如果只需要操作 DOM，应该用 DOMContentLoaded；如果依赖图片、CSS 资源加载，则使用 window.onload。" 🚀

最后：