jquery - 窗口加载事件在带有缓存的文档就绪事件之前触发

Question

随着新版本的 chrome 开始发生一些奇怪的事情，它开始在事件 之前抛出事件 $(window).load(...) $(document).ready(...) 或 $(function (){...})。

这在以前版本的“chrome”中没有发生，并且在版本 31 中开始发生。

我的环境:

jQuery 1.7.2
Chrome 31
IIS 7.5
ASP.NET MVC 4

我不明白，但是事情就是这样，如果我们第一次进入没有缓存的情况下工作正常，但是然后用缓存文件css，js，img，开始产生这个问题。

我当前的解决方案是覆盖jquery的函数load，但我认为这是正确的解决方案。

谢谢。

编辑

我们只能在服务器上的站点上播放，我们无法在本地(localhost)重现它

编辑以获取更多信息 这是服务器的 HTTP header :

HTTP/1.1 200 OK
Cache-Control: private, s-maxage=0
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 3.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 21 Nov 2013 23:02:37 GMT
Content-Length: 176350

编辑二

我测试了这段代码，看看是否是 jQuery 1.7.1 的问题，但同样的问题发生了:

(function() {

    if(!window.addEventListener || !document.addEventListener) {
        console.log('not supported window.addEventListener');
    }

    var timeDCL;

    function addListener(obj, eventName, listener) {
        obj.addEventListener(eventName, listener, false);
    }

    function finishedDCL() {
        timeDCL = new Date();
        console.log('DONE document load/ready');
    }

    function finishedLoad() {
        if(timeDCL) {
            var delta = new Date() - timeDCL;
            console.log(delta + 'ms', 'DONE window load');
        }
        else {
            console.log('Ups DONE first window load');
        }
    }

    addListener(document, "DOMContentLoaded", finishedDCL);
    addListener(window, "load", finishedLoad);
}());

结果:

Ups DONE first window load
DONE document load/ready

Answer 1

TL;DR
不要依赖 load 来始终遵循 DOMContentLoaded。

<小时/>

我知道我在游戏中迟到了，但其他人可能会在这里结束，所以我发布了这个。 当“DOM 就绪”实现的单元测试随机失败时，我遇到了这种行为。我发现原因是它假设窗口 load 事件总是在 DOMContentLoaded 之后发生。

至少在 Chrome 中 - 目前版本为 52 - 可能会出现一些压力情况(可能与不那么小的 javascript 库有关，例如 jQuery，但我不能肯定)，因此会花费很长时间解析 DOM，这会延迟 DOMContentLoaded 事件。

请注意，在每次失败时，load 事件都会提前 1 毫秒触发。

看起来浏览器确实可以同时触发这两个事件，并选择首先使用 DOM。无论出于何种原因。

jQuery.ready 实际上是在窗口加载上进行回退。