load 与 DOMContentLoaded 之间的区别 [重复]

Posted 2023-02-21

【中文标题】load 与 DOMContentLoaded 之间的区别 [重复]

【英文标题】：Difference between load vs DOMContentLoaded [duplicate]

【发布时间】：2012-02-08 18:16:54

【问题描述】：

可能重复：Difference between DOMContentLoaded and Load events

有什么区别

window.addEventListener("load", load, false);

和

document.addEventListener("DOMContentLoaded", load, false);

?

【问题讨论】：

你可能会找到答案 ***.com/questions/2414750/… 当文档的 DOM 内容完成加载时在 Window 对象上触发，但与“加载”不同的是，它不会等到所有图像都加载完毕。

【参考方案1】：

DOMContentLoaded - 整个文档 (html) 已加载。 load - 整个文档及其资源（例如图像、iframe、脚本）已加载。

【讨论】：

所以渲染树是在 DOMContentLoaded 被触发后构建的。但是 DOMContentLoaded 不会根据developer.mozilla.org/en-US/docs/Web/API/Window/… 等待图像/子资源/子帧完成加载。您是否知道这些图像/子帧/子资源是在渲染树构建后被渲染树调用的，还是在渲染树还在构建时它们已经被 DOM 树调用？换句话说，渲染树是否触发了一堆连接来下载这些图像/子帧/子资源，或者它们的下载之前已经在进行中？

【参考方案2】：

DOMContentLoaded 仅等待加载 HTML 和脚本。 window.onload 和 iframe.onload 在页面完全加载所有相关资源（包括图像和样式）时触发。

这里有更多细节你可以找到http://javascript.info/tutorial/onload-ondomcontentloaded

【讨论】：

DOMContentLoaded 是否保证所有脚本（包括延迟/异步）都已加载？这里没有提到脚本：developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

@Sergey 是的。 async 仅指脚本的下载方式。有或没有async 将暂停文档解析器，以便在下载后立即进行评估。 defer 表示“对浏览器来说，脚本应该在文档被解析之后，但在触发 DOMContentLoaded 之前执行。”