Javascript 加载 vs 就绪 vs domready vs DOMContentLoaded 事件

Question

我有点迷失在“启动”事件中 - 有很多不同的事件，并且在 DOM 和各种框架（如 jQuery）中的命名也不同。 什么是所有可能的启动事件？ 它们有何不同？ 您能否展示一个简单的时间线来演示这些事件的触发顺序？

Answer 1

。准备好（）

虽然 JavaScript 提供了用于在呈现页面时执行代码的 load 事件，但在完全接收到所有资产（例如图像）之前不会触发此事件。 在大多数情况下，一旦完全构建了 DOM 层次结构，就可以运行脚本。 传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。 使用依赖于 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

如果代码依赖于加载的资产（例如，如果需要图像的尺寸），则应将代码放置在加载事件的处理程序中。

.ready() 方法通常与属性不兼容。 如果必须使用 load，请不要使用 .ready() 或使用 jQuery 的 .load() 方法将加载事件处理程序附加到窗口或更具体的项目，如图像。

参考： http : //api.jquery.com/ready/

。加载（）

此方法是 .on( "load", handler ) 的快捷方式。

当一个元素和所有子元素都被完全加载时，加载事件被发送到一个元素。 此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和 window 对象。

一般来说，没有必要等待所有图像完全加载。 如果代码可以更早地执行，通常最好将它放在发送到 .ready() 方法的处理程序中。

参考： http : //api.jquery.com/load-event/

GlobalEventHandlers.onload

load 事件在文档加载过程结束时触发。 至此，文档中的所有对象都在DOM中，所有的图片和子框架都已经加载完毕。

还有一些特定于 Gecko 的 DOM 事件，如 DOMContentLoaded 和 DOMFrameContentLoaded（可以使用 EventTarget.addEventListener() 处理），它们会在页面的 DOM 构建后触发，但不会等待其他资源完成加载。

跨浏览器回退

Internet Explorer 8 支持 readystatechange 事件，该事件可用于检测 DOM 是否已就绪。 在较早版本的 Internet Explorer 中，可以通过定期尝试执行 document.documentElement.doScroll("left"); 来检测此状态，因为此代码段将引发错误，直到 DOM 准备就绪。

jQuery 等通用 JS 库提供了跨浏览器方法来检测 DOM 是否准备就绪。 还有提供此功能的独立脚本：contentloaded.js（仅支持一个侦听器）和 jquery.documentReady.js（不依赖于 jQuery，尽管它的名称）。 参考： https : //developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

代码：

document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
});

function load() {
    console.log("load event detected!");
}
window.onload = load;

$(document).ready(function () {
    console.log('ready');
});

$(window).load(function () {
    console.log('loaded');
});

时间线演示： http : //jsfiddle.net/HgJ33/

Answer 2

写下不同的框架及其事件会很有趣：

这是使用 jsFiddle 的测试系列。 相同的 html，不同的框架，不同的ms 。

工具

window.onload = function () {
    var now = new Date().getTime() - time;
    console.log(now, 'onload')             // 14 ms
};
window.addEvent('load', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'load')               // 15 ms
});
window.addEvent('domready', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'domready')           // 1 ms
});

jQuery

window.onload = function () {
    var now = new Date().getTime() - time;
    console.log(now, 'onload')             // 20 ms
};
$(document).on('DOMContentLoaded', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'DOMContentLoaded')   // 10 ms
});
$(document).on('ready', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'ready')              // 20 ms
});

道场工具包

dojo.addOnLoad(function() {
    //do stuff
});

唯

YUI().use('*',function(Y) {
    Y.on("domready", function() {
        //do stuff
    }, Y, "The DOMContentLoaded event fired.  The DOM is now safe to modify via script.");
});

原型

document.observe("dom:loaded", function() { 
    //do stuff
});

煎茶JS

Ext.onReady(function() {
    //do stuff
});

Answer 3

最好从您想要什么以及支持哪些浏览器的角度来考虑。

要在文档对象模型 (DOM) 中进行操作，您必须确保 HTML 页面通过网络加载并解析为树。 解决这个问题的一种方法是在 HTML 文件的末尾编写所有代码，这导致只有在解析 HTML 之后才能处理这些 javascript。 另一种较新的标准方法是侦听 DOMReady 或 DOMContentLoaded 事件或就绪事件，以确保处理程序仅在 DOM就绪后运行

DOM 树构建完成后，浏览器将请求图像、音频、视频等。在所有这些资源加载完毕后，触发窗口加载事件，现在页面已准备好完全呈现。

所以基本上你应该考虑一下你的代码是否可以在 DOM 树准备好的情况下执行，或者你是否需要加载所有东西来运行你的代码。 如果 DOM ready 的原生 javascript 实现没有涵盖您需要支持的所有浏览器，您可以选择 jQuery DOMready，这就是它的原因。

Answer 4

总的来说，previosus 的答案非常好且完整。 但是 .ready() 和 DOMContentLoaded 事件之间存在一个重要区别。

大多数浏览器都以 DOMContentLoaded 事件的形式提供类似的功能。 但是，jQuery 的 .ready() 方法在一个重要且有用的方面有所不同：如果 DOM 准备就绪并且浏览器在代码调用 .ready( handler ) 之前触发 DOMContentLoaded，则函数处理程序仍将被执行。 相比之下，在事件触发后添加的 DOMContentLoaded 事件侦听器永远不会执行。

参考 https://api.jquery.com/ready/

从中我们可以看出， .ready() 在所有情况下都至少执行一次。

例如，在浏览器控制台中，我们可以定义

>> function sample()
{
  console.log('This is sample.');

  $( document ).ready(function ()
  {
    console.log("Ready is working in all cases.")
  });  
}
undefined

结果我们有

>> sample();
undefined
This is sample. debugger eval code:3:11
Ready is working in all cases. debugger eval code:7:13
>> sample();
undefined
This is sample. debugger eval code:3:11
Ready is working in all cases. debugger eval code:7:13