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

【问题标题】：the window load event fires before that document ready event with cache窗口加载事件在带有缓存的文档就绪事件之前触发
【发布时间】：2016-08-12 23:57:31
【问题描述】：

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

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

我的环境：

jQuery 1.7.2
Chrome 31
IIS 7.5
ASP.NET MVC 4

我不明白，但确实是这样，如果我们第一次进入没有缓存可以完美地工作，但然后有缓存文件css，js，img，开始生产这个问题。

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

谢谢。

编辑

我们只能在服务器上播放网站，我们不能在本地复制它（本地主机）

编辑以获取更多信息 这是服务器的 HTTP 标头：

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

编辑 II

我测试了这段代码，看看是不是 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

【问题讨论】：

我在ready documentation 中没有看到任何承诺它发生在window.load 之前的内容。事实上，它用来确保触发的最后一个后备是 window.load.
两者都需要的用例是什么？
我越来越相信ready 是the anti-pattern the Google Closure engineers claimed it is。只需将您的脚本放在body 的末尾，就在结束</body> 标记之前。这将在它们之上的所有元素都存在时运行它们，并且几乎可以肯定在load 之前。仅当您有充分的理由（例如，您无法控制脚本标签的去向）时才与此不同。
我正在使用 31.0.1650.57m 并且无法重现该问题，一个在 DOM 准备好时触发，另一个在窗口加载时触发，应该是？
我认为this 是这个问题的答案。

标签： jquery google-chrome events

【解决方案1】：

TL;DR
不要依赖 load 始终关注 DOMContentLoaded。

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

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

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

看起来浏览器确实可以同时触发两个事件，并选择先使用 DOM。不管是什么原因。

jQuery.ready 实际上在窗口 load 上回退。

【讨论】：