一、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示例
  
页面加载中...
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      console.log('DOM树构建完成');
    });
    window.addEventListener('load', function () {
      console.log('所有资源加载完成');
    });
    window.addEventListener('onload', function() {
      console.log('所有iframe嵌入页面加载完成');
    });
  </script>