DOMContentLoaded和load事件之间的区别是什么?
当前回答
来自Mozilla开发者中心:
DOMContentLoaded事件在文档被删除时被触发 完全加载和解析，无需等待样式表，图像， 和子帧完成加载(load事件可以用来检测 一个完整的页面)。
其他回答
来自Mozilla开发者中心:
DOMContentLoaded事件在文档被删除时被触发 完全加载和解析，无需等待样式表，图像， 和子帧完成加载(load事件可以用来检测 一个完整的页面)。
为了充分理解，我建议阅读以下文章:
什么是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 所有与DOMContentLoaded、load和第一次打印相关的内容是怎样的: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
简而言之:
DOMContentLoaded事件是在创建DOM时触发的(更多DOM是什么，请参阅链接1)，load事件是在加载DOM、CSSOM和所有其他资源时触发的。如果你没有Javascript，那么你的网页加载的顺序可能是这样的:
或者用检查窗口的话来说，DOMContentLoaded事件将比load事件更早被触发(蓝线表示DOMContentLoaded，红线表示load事件):
然而，如果你使用Javascript(不是异步或延迟)，那么DOM创建将等待JS加载。因为JS也会修改CSS，所以JS会等待CSSOM加载。
由于这是最常见的情况，因此在大多数场景中，DOMContentLoaded事件的创建实际上必须等待样式表也被加载。
加载链看起来像这样:
因此，DOMContentLoaded和load之间的主要区别是，在这种情况下，只有图像的加载时间，它可以与样式表和JS并行下载。
注意，如果你在JS中使用async或defer，就不会发生这种情况:
DOMContentLoaded事件将在DOM层次结构完全构建完成后立即触发，load事件将在所有图像和子帧完成加载时触发。
DOMContentLoaded可以在大多数现代浏览器上运行，但不能在IE上运行，包括IE9及以上版本。在旧版本的IE上有一些变通方法来模拟这个事件，比如jQuery库上使用的，它们附加了IE特定的onreadystatechange事件。
domContentLoaded: marks the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution - meaning we can now (potentially) construct the render tree. Many JavaScript frameworks wait for this event before they start executing their own logic. For this reason the browser captures the EventStart and EventEnd timestamps to allow us to track how long this execution took. loadEvent: as a final step in every page load the browser fires an “onload” event which can trigger additional application logic.
源
赞同人数最多的答案是错误的，至少在更高版本的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秒后开始运行
