domcontentloaded和onload

`DOMContentLoaded` 事件表示文档的 DOM 已经被完全加载和解析，不需要等待样式表、图像和子框架的完成加载。

`onload` 事件表示页面上所有的资源已经完成加载，包括图像、样式表、脚本等。

相关问题

网页中DOMContentLoaded与onload哪个更早执行？

在网页加载过程中，DOMContentLoaded事件比onload事件更早执行。DOMContentLoaded事件是在网页DOM加载完成后就会触发，而onload事件是在网页DOM、图片、脚本、样式等所有资源都加载完成后才会触发。因此，DOMContentLoaded事件可以在页面加载过程中优化性能，而onload事件适合于执行需要等待所有资源加载完成后才能进行的任务。

DOMContentLoaded

DOMContentLoaded（文档加载完成）是一个JavaScript事件，它在浏览器解析完HTML文档的结构（DOM树）并且可以对其进行操作后立即触发。当这一事件发生时，大部分HTML标签已经被解析，并且可以访问到它们的属性和内容。尽管如此，这并不意味着所有资源（比如CSS样式表、图片等）都已经加载完毕，仅仅是文档的基本结构已经加载完成。

使用DOMContentLoaded事件的好处在于，它可以避免阻塞用户界面的渲染，因为一些开发者可能希望在DOM树可用的同时就开始初始化JavaScript代码。例如，在页面加载早期添加交互效果，而无需等待外部脚本和图像的完全加载。

当你需要确保JavaScript可以开始操作DOM，但又不想等待所有资源下载时，DOMContentLoaded就是合适的时机。如果你还想等到所有资源都加载完毕，那么你应该使用`window.onload`事件，但它会稍晚些时候触发，因为浏览器通常会异步加载资源。