问题
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://domain.com/" + i + "_a.png'><br>";
loadMe += "<img src='http://domain.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 appears to be missing images):
Number of entries: 462
Maximum storage size: 50000 KiB
Storage in use: 5593 KiB
...
Key: http://domain.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.
回答1:
The bug is described here
回答2:
I can't tell you why Firefox is behaving this way (or better yet, how to override this behavior), 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 img's are always part of the dom (and Firefox will most likely not feel the need to remove the images from the cache).
回答3:
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
回答4:
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.
来源：https://stackoverflow.com/questions/657966/browser-cache-bypassed-in-firefox