Question

考虑以下html页面，它可以加载许多大型png文件：

<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>

在IE浏览器中，Safari＆amp;在Windows机器上的Opera上，当切换显示和隐藏按钮时，此页面上的图像仅加载一次（使用FreeMeter监控）。

然而，在Firefox（新安装）中，一些图像是从服务器多次加载的（我们从不匹配网络请求中的初始峰值......从缓存中加载了一些东西）

图像的响应标题：

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

查看 about：cache ，加载的大部分图片似乎都列在那里（虽然在隐藏/显示点击之间检查缓存，但似乎缺少图像）：

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

firefox希望我从缓存中重新加载这些图像，以便我们可以轻松进行网络通话？谢谢！

更新

如果我在第一个标签中显示/隐藏后在新标签页中打开此页面，则第二个标签页不会发出网络请求。第一个选项卡继续发出网络请求。

Answer 1

该错误描述为here

Answer 2

我无法告诉你为什么Firefox会以这种方式运行（或者更好，如何覆盖这种行为），但我建议采用不同的方法来解决问题。而不是一遍又一遍地构建html字符串并从dom中完全删除这些img元素，为什么不用外部容器div构建它一次并显示/隐藏div？这样，img一直是dom的一部分（Firefox很可能不会觉得需要从缓存中删除图像）。

Answer 3

除了Rich的回答，您可以尝试更改一些Firefox缓存config values，看看它们是否会改变行为：

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

Answer 4

另一种删除缓存命中，加快页面性能和减少网络拥塞的方法（一般来说，每个域一次只执行两个请求）将使用CSS Sprites。

如果您的所有图像都是相似的尺寸，请将它们中的一些组合在一起并使用CSS来控制图像的哪个位置显示。您将为每个附加图像保存HTTP请求并大幅增强页面。许多较大的网站（如Yahoo!）都使用这种技术。

在Firefox中绕过浏览器缓存？

4 个答案: