为什么浏览器低效使2请求吗？ [英] Why do browsers inefficiently make 2 requests here?

问题描述

我注意到关于Ajax和图像加载一些奇怪的。假设你在页面上的图像和Ajax请求相同的图像 - 谁也想不到，Ajax请求将达到浏览器缓存，或者至少应该只让一个请求，生成的图像将页面和希望脚本读/处理的图像。

I noticed something odd regarding ajax and image loading. Suppose you have an image on the page, and ajax requests the same image - one would guess that ajax requests would hit the browser cache, or it should at least only make one request, the resulting image going to the page and the script that wants to read/process the image.

奇怪的是，我发现，即使在JavaScript的等待整个页面加载时，图像的要求仍使新的请求！这是在Firefox和Chrome，还是坏事jQuery的阿贾克斯一个已知的bug是干什么的？

Surprisingly, I found that even when the javascript waits for the entire page to load, the image request still makes a new request! Is this a known bug in Firefox and Chrome, or something bad jQuery ajax is doing?

在这里你可以看到这个问题的，开放的提琴手或Wireshark的，并设置它来记录，然后再单击运行：

Here you can see the problem, open Fiddler or Wireshark and set it to record before you click "run":

<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，和发送整个图像回浏览器的两倍。在铬，但它至少在正确的第二次请求，而不是下载的全部内容两次得到了304。

Note that in Firefox it makes two requests, both resulting in 200-OK, and sending the entire image back to the browser twice. In Chromium, it at least correctly gets a 304 on second request instead of downloading the entire contents twice.

奇怪的是，IE11下载整个图像的两倍，但在我看来IE9积极缓存，并下载一次。

Oddly enough, IE11 downloads the entire image twice, while it seems IE9 aggressively caches it and downloads it once.

在理想情况下我希望阿贾克斯不会做第二个请求在所有的，因为它要求完全一样的URL。还有一个原因是CSS和阿贾克斯在这种情况下，通常有不同的缓存，就像浏览器使用不同的缓存存储CSS VS Ajax请求？

Ideally I would hope the ajax wouldn't make a second request at all, since it is requesting exactly the same url. Is there a reason css and ajax in this case usually have different caches, as though the browser is using different cache storage for css vs ajax requests?

推荐答案

乐于助人的人，在Mozilla的给了一些细节，为什么出现这种情况。显然火狐假定有一个匿名请求可能比正常的不同，并为这个原因，它发出第二次请求，并且不考虑缓存的值与不同的标头是相同的要求。

The helpful folks at Mozilla gave some details as to why this happens. Apparently Firefox assumes an "anonymous" request could be different than normal, and for this reason it makes a second request and doesn't consider the cached value with different headers to be the same request.

https://bugzilla.mozilla.org/show_bug.cgi?id=1075297

这篇关于为什么浏览器低效使2请求吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！