DOMContentLoaded事件是否与jQuery的.ready()函数完全相同？

Question

我已经window.addEventListener('DOMContentLoaded', function() {});用jQuery 替换了$(document).bind('ready', function() {});,因为第一个没能在IE <9上工作而且我不想玩.attachEvent()那个虚拟浏览器,如果我可以用jQuery本身很好地覆盖它.

更换后不久,我注意到DOMContentLoaded事件总是在页面加载/刷新后大约0-2毫秒被触发(至少这是我的日志记录脚本记录的内容),而.ready()在页面刷新后总是需要至少15-20毫秒,被解雇(再次 - 由脚本记录).

我问的纯粹是为了满足我的好奇心,为什么会出现这种"显着"的延迟？当然,对我来说没有问题,jQuery稍后会触发该事件.只是,因为我想知道所有的答案(统治世界!:)),我无法忍受!:]

编辑:在.ready()函数doc一些用户(Nick(of Nexxar))指出:" jQuery模拟IE上不存在的"DOMContentLoaded"事件,但使用的机制比其他浏览器上使用的事件发出的时间要晚得多 " .也许这是一样的,我要求的？

Answer 1

假设支持该事件的浏览器:

1. 真实的事件可以支持任何document.jQuery只会使用document它加载的内容,无论你传递给它.
2. 即使事件已经发生,jQuery也会异步触发事件.'DOMContentLoaded'如果事件已经发生,附加事件将不会执行任何操作.

这些浏览器没有延迟,请参阅http://jsfiddle.net/rqTAX/3/(记录的偏移量以毫秒为单位).

对于不支持该事件的浏览器,jQuery显然也适用于它们.它将使用与真实不同的hacky机制,并且不会在真实情况下DOMContentLoaded立即触发DOMContentLoaded:

// The DOM ready check for Internet Explorer
function doScrollCheck() {
    if ( jQuery.isReady ) {
        return;
    }

    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch(e) {
        setTimeout( doScrollCheck, 1 );
        return;
    }

    // and execute any waiting functions
    jQuery.ready();
}

Answer 2

jQuery 通过绑定 的 事件来模拟该事件document，readystatechange这是 oldIE 中模拟的标准方式DOMContentLoaded。

根据 jQuery 源代码，该事件“晚”但早于触发window.onload。但是，我无法找到该事件的确切触发时间。DOMContentLoaded当 DOM 构建并准备好编写脚本时触发，因此在此之后readystatechange触发；也许它会等待布局渲染或类似的样式，或者事件稍后在渲染/布局过程中触发？

无论如何，它可能会在 后 DOMContentLoaded触发，可能是因为 IE 决定将 更新document为readyState“完成”。

（如果有人有明确的答案，请发表评论，我将更新此答案；我很想知道它何时会触发自己，但我无法在任何文档或我期望的任何网站上找到该答案怪癖模式。）