1075297 - Firefox doesn't cache request, makes two requests for the exact same image.

Status: RESOLVED INVALID

(Core :: Networking: Cache, defect)

Description

[Luke]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0
Build ID: 20140924105546

Steps to reproduce:

In a certain application I need an image shown as background-image in css, and also accessible to javascript. As you can see in this JSfiddle using Wireshark, the browser is downloading the entire image twice, although the ajax request is after the onload event, when the image *should* be loaded.
http://jsfiddle.net/95mnf9rm/1/


Actual results:

The browser downloads the image twice - compare to Chrome or IE9 which don't download the entire image twice.


Expected results:

The image should be downloaded once - either by combining requests, or sending the right headers in this circumstance to get a 304 not-modified.

More details and comments on this issue here - 
http://stackoverflow.com/questions/25819736/why-do-browsers-inefficiently-make-2-requests-here

Comment 1

[Honza Bambas (:mayhemer)]

The XHR is loading the image as an 'anonymous' load.  It's securely isolated from common web content loads, hence using a different cache entry, hence it's reloaded from the server.

Comment 2

[Luke]

Are you saying it's correct for it to double-request, even when it's in the same context, the same page, and page "should be" all loaded?

I think this was most likely related to a problem I was having recently where Firefox would never actually load because of calling consecutive identical images, and possibly some security block blocking it. Chrome was fine in that case, and doesn't seem to have this behavior as bad. :(

Comment 3

[Boris Zbarsky [:bzbarsky]]

> even when it's in the same context

It's not the same context if it's an anonymouse load.  The anonymous load doesn't send cookies, while a normal load does, for example.

Comment 4

[Luke]

Thank you for the explanation - I can confirm that one request doesn't send cookies, one does. When I add an img to the page instead of querying that url, it seems to always make one request.

What standard defines this behavior? Is Chrome just bending the rules assuming that the image will be the same with or without cookies?

Comment 5

[Boris Zbarsky [:bzbarsky]]

> What standard defines this behavior?

In theory, HTTP.

In practice, per the HTTP spec servers that send different data based on Cookie values are supposed to send a corresponding Vary header.  Also in practice servers pretty much never do that, so browsers have to assume an implied "Vary: Cookie" on everything.

Back to theory, HTTP places requirements on size of cache or eviction policy.  So while there are cases in which HTTP requires one to _not_ cache something, there aren't any cases in which it requires something to be cached.

I realize this is all somewhat unsatisfying....

Comment 6

[Luke]

Thanks for the info - I see another case that prevents caching is when CORS is set - for example http://jsfiddle.net/dqjyvcvg/

I suppose it's more a web standards bug that there is no way to fetch the image with CORS for analyzing the image, while keeping a copy of the image in background-image, without doubling requests?

Comment 7

[Boris Zbarsky [:bzbarsky]]

I'd think you can fetch with CORS but also with credentials...

Comment 8

[Boris Zbarsky [:bzbarsky]]

So set xhr.withCredentials = true before doing the send() call.

Comment 9

[Anne (:annevk)]

Trying to update theory: http://www.ietf.org/mail-archive/web/http-state/current/msg01447.html