DOMContentLoaded和load事件之间的区别

小开

最佳答案

DOMContentLoaded事件在文档被删除时被触发完全加载和解析，无需等待样式表，图像，和子帧完成加载(load事件可以用来检测

小开

DOMContentLoaded事件将在DOM层次结构完全构建时触发，load事件将在所有图像和子帧完成加载时触发。

DOMContentLoaded可以在大多数现代浏览器上运行，~~但IE上没有~~包括IE9及以上版本。在旧版本的IE中有一些解决方法来模拟这个事件，比如在jQuery库中使用的，它们附加了即特定 onreadystatechange事件。

小开

DOMContentLoaded = = window.onDomReady()

Load = = window.onLoad()

只有当文档“准备好”时，才能安全地操作页面。jQuery为您检测这种就绪状态。包含在$(document).ready()中的代码只会在页面文档对象模型(DOM)准备好让JavaScript代码执行时运行。包含在$(window).load(function() { ... })中的代码将在整个页面(图像或iframes)准备就绪后运行，而不仅仅是DOM。

看到:使用JQuery Core的文档就绪文档。

小开

你自己看看不同之处:

< a href = " http://web.archive.org/web/20150405114023/http: / / ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html " > < / >演示

从微软IE

DOMContentLoaded事件在当前页面解析完成时触发;当所有文件完成从所有资源(包括广告和图像)加载时，load事件将触发。DOMContentLoaded是一个用于将UI功能连接到复杂网页的伟大事件。

从Mozilla Developer Network . net

DOMContentLoaded事件在文档完全加载和解析时触发，而不需要等待样式表、图像和子帧完成加载(load事件可用于检测完全加载的页面)。

小开

domContentLoaded:标记DOM准备就绪时的点没有阻碍JavaScript执行的样式表这意味着我们现在可以(潜在地)构建渲染树了。许多 JavaScript框架在开始执行自己的逻辑之前等待这个事件。出于这个原因，浏览器捕获EventStart和EventEnd时间戳，以允许我们跟踪这个执行的时间花了。李< / p > < / >
loadEvent:作为每个页面加载浏览器触发的最后一步一个“onload”事件，可以触发额外的应用程序逻辑

source

小开

下面是一些适用于我们的代码。我们发现MSIE被DomContentLoaded击中，当没有额外的资源被缓存时，似乎有一些延迟(根据我们的控制台日志，高达300ms)，并且当它们被缓存时触发得太快了。所以我们采取了MISE的退路。你还想触发doStuff()函数，不管DomContentLoaded是在你的外部JS文件之前还是之后触发。

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);


function doStuff(){
//
}
if(isIE){
// play it safe, very few users, exec ur JS when all resources are loaded
window.onload=function(){doStuff();}
} else {
// add event listener to trigger your function when DOMContentLoaded
if(document.readyState==='loading'){
document.addEventListener('DOMContentLoaded',doStuff);
} else {
// DOMContentLoaded already loaded, so better trigger your function
doStuff();
}
}

小开

赞同人数最多的答案是错误的，至少在更高版本的Chrome 80+中是这样。

1、DOMContentLoaded不会触发，直到CSS和JavaScript被执行，DOM被解析(文档已经加载)

2、窗户。onload事件，该事件在所有网络资源(如CSS和JavaScript)加载完成、DOM解析完成(文档加载完成)之前不会触发。

基于Chrome 80+测试结果:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded , load</title>
  

<link href="http://localhost/public/css?sleep=5000" rel="stylesheet">
<!-- 5000 milliseconds after the URL request the server begins to respond -->
</head>
<body>
<img src="http://localhost/public/img?sleep=8000">
<!-- 8000 milliseconds after the URL request the server starts responding to the resource -->
  

<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded OKOK')
})


window.addEventListener('load', () => {
console.log('window load OK')
})
</script>


<script src="http://localhost/public/js?sleep=2000"></script>
<!-- 2000 milliseconds after the URL request the server begins to respond -->
</body>
</html>

测试执行结果页面运行5秒后，执行console.log('domContentLoaded OKOK')

console.log(' Window Load OK')在8秒开始运行

小开

为了充分理解，我建议阅读以下文章:

什么是DOM和CSSOM: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
什么是渲染树:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

简而言之:

DOMContentLoaded事件是在创建DOM时触发的(有关DOM的更多信息，请参阅链接1)，而load事件是在加载DOM、CSSOM和所有其他资源时触发的。如果你没有Javascript，那么你的网页加载的顺序可能是这样的: < / p > 或者用检查窗口的话来说，DOMContentLoaded事件将比load事件更早被触发(蓝线表示DOMContentLoaded，红线表示load事件): < / p >

然而，如果你使用Javascript(不是异步或延迟的)，那么DOM的创建将等待JS加载。由于JS也修改CSS, JS将等待CSSOM加载。

由于这是最常见的情况，所以在大多数情况下，DOMContentLoaded事件的创建实际上必须等待样式表也被加载。

加载链看起来像这样:

因此，在这种情况下，DOMContentLoaded和load之间的主要区别只是图像的加载时间，图像可以与样式表和JS并行下载。

注意，如果你在JS中使用async或defer，就不会发生这种情况: