Question

DOMContentLoaded和load事件之间有什么区别？

Answer 1

文档发布时会触发DOMContentLoaded事件完全加载和解析，无需等待样式表，图像，和子帧完成加载（加载事件可用于检测一个完整的页面。）

Answer 2

一旦DOM层次结构完全构建，DOMContentLoaded事件就会触发，load事件将在所有图像和子帧完成加载后执行。

DOMContentLoaded适用于大多数现代浏览器，~~但不适用于IE~~ ，包括IE9及更高版本。在旧版本的IE上有一些workarounds来模仿这个事件，就像在jQuery库上使用的那样，它们会附加 IE特定的 onreadystatechange事件。

Answer 3

自己看看差异：

DEMO

来自Microsoft IE

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

来自Mozilla Developer Network

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

Answer 4

DOMContentLoaded == window.onDomReady()

Load == window.onLoad()

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

请参阅：http://learn.jquery.com/using-jquery-core/document-ready/

Answer 5

domContentLoaded ：标记DOM准备就绪的时间点没有阻止JavaScript执行的样式表 - 这意味着我们现在可以（可能）构造渲染树。许多 JavaScript框架在开始执行自己的逻辑之前等待此事件。因此，浏览器捕获EventStart和EventEnd时间戳，以便我们跟踪执行的时间拿。
loadEvent ：作为加载浏览器的每个页面的最后一步 “onload”事件，可触发其他应用程序逻辑。

source

Answer 6

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

什么是 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、加载和首次打印有什么关系： https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

简而言之：

创建 DOMContentLoaded 时会触发 DOM 事件（有关 DOM 的详细信息，请参见链接 1），并且 load 事件在 {{ 1}}、DOM 和所有其他资源都已加载。如果您没有 Javascript，那么您的网页加载顺序可能如下所示：

或者用检查窗口的话来说，CSSOM 事件会比 DOMContentLoaded 事件更早触发（蓝线代表 load，红线代表 DOMContentLoaded事件）：

但是，如果您使用 Javascript（不是异步或延迟），那么 load 创建将等待 JS 加载。由于 JS 也会修改 CSS，因此 JS 会等待 DOM 加载。

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

加载链如下所示：

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

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

Answer 7

这是一些对我们有用的代码。我们发现MSIE受到DomContentLoaded的冲击，如果没有其他资源被缓存，则似乎会有一些延迟（根据控制台日志记录，最长为300ms），并且缓存它们时，触发速度太快。因此，我们对MISE求助。无论doStuff()是在外部JS文件之前还是之后触发，您都还想触发DomContentLoaded函数。

// 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();
    }
}

Answer 8

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

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

2、window.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和加载事件之间的区别

8 个答案: