了解 DOMContentLoaded 事件

最新推荐文章于 2025-03-11 17:19:44 发布

gtLBTNq9mr3

最新推荐文章于 2025-03-11 17:19:44 发布

阅读量587

点赞数

文章标签： javascript 前端 html 开发语言 ecmascript

原文链接：https://mp.weixin.qq.com/s?__biz=MzI2ODY0ODM2Ng==&mid=2247490467&idx=1&sn=12c1962a8d65a310e9fbb3c251acc02b&chksm=eaed3162dd9ab874c4c5335f74add823fc3b595ea4453e30d93192d11d65b0cdd980cb6db71c&scene=126&sessionid=0

版权

本文解释了DOMContentLoaded和load事件在网页加载过程中的区别，强调DOMContentLoaded在DOM解析后触发，适合进行DOM操作和早期UI初始化。同时介绍了defer和async属性对脚本加载和执行的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当纯 HTML 被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。

一个易混用但不同的事件是，load,这个事件仅仅应该在探测到整个页面完全加载完成时被使用。一个常见的错误就是在该使用DOMContentLoaded的地方使用了load 。

DOMContentLoaded事件在浏览器完成解析HTML文档，构建DOM树之后触发，但在加载外部资源（如图片和样式表）之前。这意味着当我们的脚本在DOMContentLoaded事件中运行时，它可以安全地操作DOM，但可能无法使用所有的外部资源。

使用场景：

1、动态脚本加载：如果你的网页需要加载大量的脚本，你可能想要在DOMContentLoaded事件后再加载它们，以提高页面的初始加载速度。

2、DOM操作：如果你的脚本需要在DOM加载完成后进行操作（例如，添加事件处理程序或动态创建元素），你可以在DOMContentLoaded事件中执行这些操作。

3、初始化UI：如果你的脚本需要在页面加载时初始化一些UI元素（例如，滑动菜单或模态对话框），你可以在DOMContentLoaded事件中执行这些初始化操作。

示例代码：

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM fully loaded and parsed");
  });


  for (let i = 0; i < 1000000000; i++) {} // 这段同步脚本将会延迟 DOM 解析，
  // 所以 DOMContentLoaded 事件将会延迟执行。
</script>

请注意，DOMContentLoaded事件可能在window.onload事件之前触发，因为window.onload事件需要等待所有外部资源（包括图片和样式表）加载完成后才会触发。

defer和async是HTML中 <script> 标签的两个属性，它们影响浏览器加载和执行脚本的方式。

1、defer：当 <script> 标签有defer属性时，浏览器会在解析HTML文档的同时并行加载脚本，但会等到整个文档解析完成（即DOMContentLoaded事件触发后）再执行脚本。如果有多个带有defer属性的脚本，它们会按照在文档中出现的顺序执行。

2、async：当 <script> 标签有async属性时，浏览器会在解析HTML文档的同时并行加载脚本，一旦脚本加载完成，浏览器会立即执行它。这可能会在DOMContentLoaded事件触发之前，也可能在之后，这取决于脚本的加载速度。

所以，如果你的脚本使用了defer属性，那么它会在DOMContentLoaded事件之后执行。如果你的脚本使用了async属性，那么它可能在DOMContentLoaded事件之前或之后执行，这取决于脚本的加载速度。