javascript - 为什么浏览器在这里低效地发出 2 个请求？

Question

我注意到关于 ajax 和图像加载的一些奇怪之处。假设您在页面上有一张图片，并且 ajax 请求相同的图片 - 有人会猜测 ajax 请求会命中浏览器缓存，或者它应该至少只发出一个请求，结果图像转到页面和想要的脚本读取/处理图像。

意外的是，我发现即使javascript等待整个页面加载完毕，图片请求还是会进行新的请求!这是 Firefox 和 Chrome 中的已知错误，还是 jQuery ajax 正在做的坏事？

Here you can see the problem ，打开Fiddler或Wireshark并设置为录制，然后点击“运行”:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="something" style="background-image:url(http://jsfiddle.net/img/logo-white.png);">Hello</div>
<script>

jQuery(function($) {
    $(window).load(function() {
        $.get('http://jsfiddle.net/img/logo-white.png');
    })
});

</script>

请注意，在 Firefox 中，它会发出两个请求，均返回 200-OK，并将整个图像发送回浏览器两次。在 Chromium 中，它至少在第二次请求时正确地获得 304，而不是两次下载整个内容。

奇怪的是，IE11 将整个图像下载了两次，而 IE9 似乎主动缓存并下载了一次。

理想情况下，我希望 ajax 根本不会发出第二个请求，因为它请求的是完全相同的 url。在这种情况下，css 和 ajax 通常具有不同的缓存是否有原因，就好像浏览器对 css 和 ajax 请求使用不同的缓存存储一样？

Answer 1

我使用最新的谷歌浏览器，它发出一个请求。但是在您的 JSFIDDLE 示例中，您要加载 jQuery 两次。首先在 style 属性上使用 CSS，然后在代码中使用 script 标签。改进:JSFIDDLE

<div id="something" style="background-image:url('http://jsfiddle.net/img/logo-white.png');">Hello</div>

<script>
    jQuery(window).load(function() {
        jQuery.get('http://jsfiddle.net/img/logo-white.png');
    });

    // or

    jQuery(function($) {
        jQuery.get('http://jsfiddle.net/img/logo-white.png');
    });
</script>

jQuery(function($) {...} 在 DOM 准备就绪时调用，jQuery(window).load(...); 如果 DOM 准备就绪准备就绪，每个图像和其他资源都已加载。将两者嵌套在一起是没有意义的，另请参见此处:window.onload vs $(document).ready()

当然，图像在 Web 检查器的 Network 选项卡中加载了两次。首先通过您的 CSS，其次通过您的 JavaScript。第二个请求可能被缓存了。

更新:但是每个请求是否缓存都会显示在此选项卡中。请参阅以下示例:http://jsfiddle.net/95mnf9rm/4/有 5 个带有缓存 AJAX 调用的请求和 5 个没有缓存的请求。 “网络”选项卡中显示了 10 个请求。当您在 CSS 中使用图像两次时，它只会被请求一次。但是，如果您显式进行 AJAX 调用，则浏览器会进行 AJAX 调用。如你所愿。然后可能缓存或不缓存，但它是明确请求的，不是吗？