深入解析domcontentloaded事件

小蓝 • 2024-12-29 12:51 • 编程

一、domcontentloaded是什么？

1、domcontentloaded是一个事件，当HTML文档在浏览器中被完全加载和解析完成之后，触发该事件。

2、该事件与页面中的CSS和JS资源无关，仅限于DOM树的构建完成。因此，该事件会比load事件触发得更早一些。

二、domcontentloaded早于onload的原因是什么？

1、由于domcontentloaded事件仅与HTML文档的解析有关，并不涉及页面中CSS和JS资源的加载和解析，所以会比load事件先触发一些。

2、如果将JS资源放在页面底部，或者使用defer或async属性，可以让JS的加载和解析在domcontentloaded事件之后再进行，从而避免对页面加载速度的影响。

三、domcontentloaded和load事件的区别

1、domcontentloaded事件表示HTML文档的DOM树已经构建完成，但是一些图片、JS文件等外部资源可能还没有加载完成。

2、load事件表示页面中的所有资源已经加载完成，包括图片、style和script等外部资源。

3、因此，domcontentloaded事件触发的时机比load事件早，可以让页面更快地显示内容。

四、domcontentloaded和load事件谁先执行？

1、由于domcontentloaded事件仅与HTML文档的解析有关，不需要等待CSS和JS资源的加载和解析，因此会先于load事件触发。

2、但是，如果页面中的JS资源被放在body的底部，或者使用了defer或async属性，它们的加载和解析会在domcontentloaded事件之后再进行，从而让load事件晚于domcontentloaded事件触发。

五、domcontentloaded与onload事件的区别

1、domcontentloaded事件表示页面的DOM树已经构建完成，但是一些图片、JS文件等可能还在加载中。

2、onload事件表示页面中的所有资源都已经加载完成，包括图片、style和script等外部资源。

3、与load事件类似，onload事件在页面所有资源加载完成后才会触发。

4、但是，与load事件不同的是，onload事件会等待所有嵌入式iframe中的资源加载完成之后再触发。

六、完整代码示例：




  
  domcontentloaded示例


  domcontentloaded示例
  页面加载中...
  
    document.addEventListener('DOMContentLoaded', function () {
      console.log('DOM树构建完成');
    });
    window.addEventListener('load', function () {
      console.log('所有资源加载完成');
    });
    window.addEventListener('onload', function() {
      console.log('所有iframe嵌入页面加载完成');
    });

在该示例中，我们使用了addEventListener方法，给domcontentloaded、load和onload事件分别绑定了一个处理函数。在控制台中，我们可以看到它们的触发时机。

当页面的DOM树构建完成时，我们看到了“DOM树构建完成”这个日志。当所有资源加载完成时，我们看到了“所有资源加载完成”这个日志。而当所有iframe嵌入页面的资源都加载完成时，我们看到了“所有iframe嵌入页面加载完成”这个日志。

通过这个示例，我们可以更直观地理解DOMContentloaded事件的触发时机及其与其他事件的异同。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300332.html