4

考虑以下 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://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>

在 Windows 机器上的 IE、Safari 和 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，大多数加载的图像似乎都列在那里（尽管检查hide/show点击之间的缓存，似乎缺少图像）：

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

Firefox 期望我从缓存中重新加载这些图像，以便我们可以轻松地进行网络调用？谢谢！

更新

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

4

4 回答 4

3

该错误在此处描述

于 2009-03-20T01:13:18.710 回答
1

我不能告诉你为什么 Firefox 会这样（或者更好的是，如何覆盖这种行为），但我会建议一种不同的方法来规避这个问题。与其一遍又一遍地构建 HTML 字符串并img从 DOM 中完全删除这些元素，为什么不使用外部容器div和show/构建hide一次div？这样，imgs 始终是 DOM 的一部分（Firefox 很可能不会觉得需要从缓存中删除图像）。

于 2009-03-18T12:10:31.073 回答
1

除了 Rich 的回答之外，您还可以尝试更改一些 Firefox 缓存配置值，看看它们是否会改变行为：

browser.cache.check_doc_frequency
browser.cache.disk.capacity
browser.cache.memory.capacity
于 2009-03-18T12:14:32.560 回答
1

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

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

于 2009-03-18T12:27:15.540 回答