Javascript DOMContentLoaded和load事件之间的差异

DOMContentLoaded

和

load

事件之间有什么区别？

来自：

DOMContentLoaded事件在文档已加载时激发 完全加载和解析，无需等待样式表、图像， 以及完成加载的子帧（加载事件可用于检测 完全加载的页面）

---

DOM层次结构完全构建后，

DOMContentLoaded

事件将立即触发，

load

事件将在所有图像和子帧加载完成后触发

---

DOMContentLoaded

将适用于大多数现代浏览器，但不适用于包括IE9及以上版本的IE。有一些在旧版本的IE上模拟此事件，如jQuery库上使用的，它们附加IE特定的事件。

DOMContentLoaded

=

window.onDomReady（）

Load

=

window.onLoad（）

在文档“就绪”之前，页面无法安全操作。jQuery会为您检测这种就绪状态。$（document）.ready（）中包含的代码只有在页面文档对象模型（DOM）准备好让JavaScript代码执行后才会运行。包含在$（窗口）.load（函数（）{…}）中的代码将在整个页面（图像或iframe）而不仅仅是DOM就绪后运行

---

请参见：。

请自己查看差异：

来自

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

来自

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

• domContentLoaded：标记DOM准备就绪和 没有阻止JavaScript执行的样式表- 这意味着我们现在（可能）可以构建渲染树。许多的 JavaScript框架在开始执行自己的逻辑之前等待此事件。因此，浏览器会捕获EventStart和EventEnd时间戳，以便我们跟踪此执行的时间长度 拿走了

• loadEvent：作为每个页面加载的最后一步，浏览器会启动 “onload”事件，可触发附加的应用程序逻辑

---

以下是一些适用于我们的代码。我们发现MSIE在使用

DomContentLoaded

时会被命中或未命中，当没有缓存额外资源时（根据控制台日志记录，高达300ms），会出现一些延迟，并且在缓存资源时会触发得太快。因此，我们对米塞采取了退路。您还希望触发

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、 在执行CSS和JavaScript并解析DOM（文档已加载）之前，DOMContentLoaded不会触发

2、 window.onload事件，在加载所有网络资源（如CSS和JavaScript）并解析DOM（已加载文档）之前不会触发

---

根据Chrome 80+测试结果：

加载，加载
document.addEventListener（'DOMContentLoaded'，（）=>{
console.log（'DOMContentLoaded-OKOK'）
})
window.addEventListener（'load'，（）=>{
console.log（'窗口加载正常'）
})

要全面理解，我建议阅读以下文章：

什么是DOM和CSSOM：

渲染树是什么：

与DOMContentLoaded、load和first print的所有内容有何关联：

简言之：

---

创建

DOM

时会触发

DOMContentLoaded

事件（有关

DOM

的更多信息，请参阅链接1），加载

DOM

、

CSSOM

和所有其他资源时会触发

load

事件。如果您没有Javascript，则加载网页的顺序可能如下所示：

或者用检查窗口的话来说，

DOMContentLoaded

事件将比

load

事件更早触发（蓝线表示

DOMContentLoaded

，红线表示

load

事件）：

但是，如果使用Javascript（非异步或延迟），则

DOM

创建将等待JS加载。由于JS还修改CSS，因此JS将等待

CSSOM

加载

由于这是最常见的情况，因此在大多数情况下，

DOMContentLoaded

事件的创建实际上必须等待样式表也被加载

装载链如下所示：

因此，

domcontentload

和

load

之间的主要区别在于，在这种情况下，只有图像的加载时间，可以与样式表和JS并行下载

这并不是说，如果对JS使用async或defer，就不会发生这种情况：

---

当您说“此事件”时，您指的是哪个事件？“此事件”=DOMContentLoaded。它在IE8中不起作用。如果您需要支持它，请使用CMS链接toFyi的变通方法，同一MDN链接[now]也会说：“注意：样式表加载阻止脚本执行，因此，如果在a之后有a，则在加载样式表之前，页面将不会完成解析，而DOMContentLoaded将不会触发。”@Nick此页面给出了原因。我建议你看录像