Caching of background-image and JavaScript

[Lode]

Hello,

For a game written in JavaScript, for the images of that game, I used a PNG image that contains all the textures. By setting background-position, the right texture is chosen. The image itself is set with background-image: "url(image.png)". (Note: the background-position thing is irrelevant to the problem below, just mentioning it to show that it's a single image being requested many times).

When rendering the game board on screen, in JavaScript, it adds all the tiles with the image above (as divs with a CSS class containing that background-image) to the DOM.

So here is the thing:

When rendering e.g. 100 such tiles on screen in one go, Chromium will send 100 requests to the server for image.png. This makes it of course ugly and flickering, plus sends too much requests to the server (it sends back lots of 304 Not Modified).

Firefox does not, Firefox sends the request only once, and then never anymore, and has no flickering.

The solution for making it work properly in Chromium too, is to add a cache-control HTTP header to the image. Then it does the same as Firefox already does without that header.

Questions:

1) Why does Chromium do this? Is Chromium or Firefox behaviour more correct according to the relevant standards?
2) Are there any other solutions than a HTTP header, because, what if you cannot control the HTTP headers of the server you host your files on?
3) Is this a bug, or intended behaviour?

Thanks.

[PhistucK]

Sounds like a bug, but it might have something to do with bad HTTP headers. Do you have a working (failing) test case online so I could test?

☆PhistucK

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss
 
 
 

[Lode]

Hello,

I have a test case here:

http://lodev.org/tmaiNOCACHETEST/ (and that link without NOCACHETEST is the version with cache-control that works)

However, I'm currently at another computer than I was when the problem occured, and here the problem does not happen.

It happened on a computer with Chromium on Archlinux (I can look up the Chromium version tonight). In the link above, going to Network tab in the developer tools, and then in the game pressing one of the 3 red buttons to start and having the board with the hexes render, showed 100s of requests for the image in the Network tab.

However, now I'm on an Ubuntu computer with Chrome instead of Chromium, and the problem does not happen here.

Any ideas?

Thanks.

[PhistucK]

Unless I am missing something, I do not see any difference between the nocachetest version and the normal version (in terms of HTTP headers and source - only of the HTML itself).

Anyway, my Chrome is only sending one request.

I guess there is something wrong with Chromium. If it is a snapshot/continuous build, try downloading a new one. If it is a distribution, it might be a bad modification.

☆PhistucK

[Lode Vandevenne]

The difference is on tiles.png:

For the working version:

    Cache-Control: max-age=172800, public, must-revalidate
    Connection: Keep-Alive
    Date: Mon, 29 Apr 2013 10:41:59 GMT
    ETag: "37e87de-83ee-4db73d7239d00"
    Keep-Alive: timeout=5, max=99
    Server: Apache/2.2.22 (FreeBSD) mod_ssl/2.2.22 OpenSSL/1.0.1c mod_hcgi/0.9.4 DAV/2

For the nocachetest version:

    Connection: Keep-Alive
    Date: Mon, 29 Apr 2013 10:42:43 GMT
    ETag: "7e31f6-83ee-4db7c89e8b6c0"
    Keep-Alive: timeout=5, max=98
    Server: Apache/2.2.22 (FreeBSD) mod_ssl/2.2.22 OpenSSL/1.0.1c mod_hcgi/0.9.4 DAV/2