DOMContentLoaded 事件先于 load 事件执行。
-
DOMContentLoaded: 当 HTML 文档被完全解析和 DOM 树构建完成后触发，不包括样式表、图片和子框架等外部资源的加载。这意味着即使图片或样式表仍在加载，
DOMContentLoaded也会触发。 你可以把它理解为“DOM 准备好了”。 -
load: 当整个页面及其所有依赖资源（例如样式表、图像、脚本和子框架）完全加载完成后触发。 你可以把它理解为“页面完全加载好了”。
因此，执行顺序是：DOMContentLoaded -> load
实际应用场景举例：
-
如果你想尽快操作 DOM，例如添加事件监听器或修改 DOM 元素的样式，应该在
DOMContentLoaded事件中执行代码。这样可以提高用户体验，因为用户不必等待所有资源都加载完成就可以看到页面内容并进行交互。 -
如果你需要在所有资源都加载完成后执行某些操作，例如获取图片的尺寸或执行依赖于外部脚本的代码，则应该在
load事件中执行代码。
代码示例：
document.addEventListener('DOMContentLoaded', function() {console.log('DOM fully loaded and parsed');// 可以在这里安全地操作 DOM
});document.addEventListener('load', function() {console.log('Page fully loaded');// 可以在这里访问所有资源，例如图片的尺寸
});window.onload = function() {console.log('Page fully loaded (using onload property)'); // 和上面的 addEventListener('load') 效果相同
};
总结: DOMContentLoaded 更加注重 HTML 文档本身的加载完成，而 load 则关注的是整个页面及其所有资源的加载完成。 选择哪个事件取决于你的具体需求。 如果只是操作 DOM，DOMContentLoaded 效率更高；如果需要所有资源都加载完毕，则选择 load。
