DOMContentLoaded和load事件之间的区别是什么?
当前回答
赞同人数最多的答案是错误的，至少在更高版本的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秒后开始运行
其他回答
赞同人数最多的答案是错误的，至少在更高版本的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秒后开始运行
DOMContentLoaded事件将在DOM层次结构完全构建完成后立即触发，load事件将在所有图像和子帧完成加载时触发。
DOMContentLoaded可以在大多数现代浏览器上运行，但不能在IE上运行，包括IE9及以上版本。在旧版本的IE上有一些变通方法来模拟这个事件，比如jQuery库上使用的，它们附加了IE特定的onreadystatechange事件。
你自己看看不同之处:
DEMO
来自微软IE
DOMContentLoaded事件在当前页面解析完成时触发;当所有文件完成从所有资源(包括广告和图像)加载时，load事件将触发。DOMContentLoaded是一个用于将UI功能连接到复杂网页的伟大事件。
来自Mozilla开发者网络
DOMContentLoaded事件在文档完全加载和解析时触发，而不需要等待样式表、图像和子帧完成加载(load事件可用于检测完全加载的页面)。
来自Mozilla开发者中心:
DOMContentLoaded事件在文档被删除时被触发 完全加载和解析，无需等待样式表，图像， 和子帧完成加载(load事件可以用来检测 一个完整的页面)。
DOMContentLoaded = window . onDomReady ()
负荷= = window ()
在文档“准备好”之前，页面不能被安全操作，jQuery为您检测这种准备就绪状态。$(document).ready()中包含的代码只在页面文档对象模型(DOM)准备好执行JavaScript代码时才会运行。包含在$(window).load(function(){…})将在整个页面(图像或iframes)，而不仅仅是DOM准备好后运行。
参见:使用JQuery Core的文档就绪文档。
