DOMContentLoaded和加载事件之间的区别

Question

DOMContentLoaded和load事件有什么区别？

Answer 1

来自Mozilla开发人员中心:

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

Answer 2

该DOMContentLoaded事件将触发一旦DOM分层已全部构建,该load事件将做时,所有图像和子帧已完成加载.

DOMContentLoaded将适用于大多数现代浏览器,但不适用于包括IE9及更高版本的IE.有一些变通方法可以在旧版本的IE上模仿这个事件,就像在jQuery库上使用的那样,它们附加了IE特定的 onreadystatechange事件.

Answer 3

自己看看差异:

DEMO

来自Microsoft IE

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

来自Mozilla开发者网络

在完全加载和解析文档时触发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

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

1. 什么是 DOM 和 CSSOM：https://developers.google.com/web/fundamentals/performance/ritic-rendering-path/constructing-the-object-model
2. 什么是渲染树：https://developers.google.com/web/fundamentals/performance/ritic-rendering-path/render-tree-construction
3. 一切与 DOMContentLoaded、加载和首次打印有何关系： https://developers.google.com/web/fundamentals/performance/ritic-rendering-path/analyzing-crp

简而言之：

DOMContentLoaded创建时会触发该事件DOM（有关更多信息，请参阅链接 1 DOM），并且加载和所有其他资源load时会触发该事件。如果您没有 Javascript，那么您的网页加载顺序可能如下所示： DOMCSSOM

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

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

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

加载链看起来像这样：

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

请注意，如果您对 JS 使用 async 或 defer，则不会发生这种情况：

Answer 6

• domContentLoaded:标记了DOM准备就绪并且没有阻止JavaScript执行的样式表 - 这意味着我们现在(可能)构造渲染树.许多JavaScript框架在开始执行自己的逻辑之前等待此事件.因此,浏览器捕获EventStart和EventEnd时间戳,以便我们跟踪执行所花费的时间.

• loadEvent:作为每个页面加载的最后一步,浏览器触发一个"onload"事件,该事件可以触发其他应用程序逻辑.

资源