一、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中的资源加载完成之后再触发。
六、完整代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>domcontentloaded示例</title>
</head>
<body>
<h1>domcontentloaded示例</h1>
<p>页面加载中...</p>
<script>
document.addEventListener('DOMContentLoaded', function () {
console.log('DOM树构建完成');
});
window.addEventListener('load', function () {
console.log('所有资源加载完成');
});
window.addEventListener('onload', function() {
console.log('所有iframe嵌入页面加载完成');
});
</script>
</body>
</html>
