CODEWITHSUNDEEP
javascripthtmlfirefoxcachingfirebug
jedierikb
jedierikb

Reputation: 13079

browser cache bypassed in firefox?

Consider the following html page, which can load in many large png files:

<html>
<head>
    <script type="text/javascript">

        function hide( ) {
            document.getElementById("here").innerHTML = "hidden";
        }    
        function show( ) {
            var loadMe = "";
            for (var i=1; i<250; i++) {
                loadMe += "<img src='http://example.com/" + i + "_a.png'><br>";
                loadMe += "<img src='http://example.com/" + i + "_b.png'><br>";
        }
        document.getElementById("here").innerHTML = loadMe;
    }
</script>
</head>
<body>
    <a href="javascript:hide();">hide</a>
    <a href="javascript:show();">show</a>
    <div id="here"></div>
</body>
</html>

In IE, Safari & Opera on a windows machine, the images on this page are only loaded once (monitored with FreeMeter) when the show and hide buttons are toggled.

However, in Firefox (freshly installed), some images are loaded from the server multiple times (we never match the initial peak in network requests... a few things are loaded from the cache).

The response headers of the images read:

Date              Wed, 18 Mar 2009 11:42:02 GMT
Server            Apache/2.2.3 (Red Hat)
Last-Modified     Mon, 27 Oct 2008 19:19:47 GMT
Etag              "1abb7d7-292-45a41039f7ac0"
Accept-Ranges     bytes
Content-Length    658
Cache-Control     max-age=7257600
Expires           Thu, 15 Apr 2010 20:00:00 GMT
Connection        close
Content-Type      image/png

Looking into about:cache, most of the images loaded appear to be listed there (although inspecting the cache between hide/show clicks, there appear to be missing images):

Number of entries:  462
Maximum storage size:   50000 KiB
Storage in use:     5593 KiB

...

Key: http://example.com/23_a.png
Data size: 16139 bytes
Fetch count: 13
Last modified: 2009-03-18 07:40:14
Expires: 2009-06-10 07:40:00

What's firefox expecting from me to reload these images from the cache so we can go easy on the network calls? Thank you!

Update

If I open this page in a new tab after showing / hiding in the first tab, the second tab makes no network requests. The first tab continues to make network requests.

Upvotes: 4

Views: 3613

Answers (4)

Rich
Rich

Reputation: 36806

I can't tell you why Firefox is behaving this way (or better yet, how to override this behaviour), but I'd suggest a different approach that might circumvent the problem. Instead of building the HTML string over and over again and completely removing these img elements from the DOM, why not just build it once with an outer container div and show/hide the div? This way, the imgs are always part of the DOM (and Firefox will most likely not feel the need to remove the images from the cache).

Upvotes: 1

jedierikb
jedierikb

Reputation: 13079

The bug is described here

Upvotes: 3

Some Canuck
Some Canuck

Reputation: 846

Another way to remove the cache hit, to speed up page performance, and to reduce network congestion (generally speaking, only two requests per domain execute at a time) would be to use CSS Sprites.

If all of your images are a similar size, combine some of them and use CSS to control which position of the image is displayed. You'll save the HTTP Requests for each additional image and drastically enhance the page. Many larger web sites (such as Yahoo!) use this technique.

Upvotes: 1

schnaader
schnaader

Reputation: 49719

Additionally to Rich's answer, you could try to change some Firefox cache config values and see if they alter the behaviour:

browser.cache.check_doc_frequency
browser.cache.disk.capacity
browser.cache.memory.capacity

Upvotes: 1

Related Questions