为什么 Firefox 不重新下载页面上已有的图像？答案

【问题标题】：Why doesn't Firefox redownload images already on a page?为什么 Firefox 不重新下载页面上已有的图像？
【发布时间】：2011-01-12 15:01:35
【问题描述】：

我刚刚读到这篇文章：https://developer.mozilla.org/en/HTTP_Caching_FAQ

我想了解一个 firefox 行为（我猜还有其他一些浏览器）：

如果我使用任何网页并尝试在 javascript 中多次插入相同的图像，即使我指定所有需要的标头说“永远不要使用缓存”，图像也只会下载一次。（见文章）

我知道有一些解决方法（例如将查询字符串添加到 url 的末尾等） 但是为什么 firefox 会这样，如果我说不必缓存图像，为什么当我尝试重新插入时，图像仍然从缓存中获取？

另外，什么缓存用于此？（我猜是内存缓存）

这种行为对于例如动态包含是否相同？ ANSWSER IS NO :) 我刚刚对其进行了测试，每次将脚本附加到 DOM 时，js 脚本的相同标头都会让 firefox 重新下载它。

PS：我知道你想知道为什么我需要这样做（多次附加相同的图像并强制重新下载，但这是我们应用程序的工作方式）

谢谢

最好的答案是：firefox 会将当前页面加载的图像存储在内存缓存中，即使您指定他不必缓存它们。

你不能改变这种行为，但这很奇怪，因为它对于 javascript 文件来说是不一样的

有人可以解释或链接到描述 Firefox 缓存如何工作的文档吗？

【问题讨论】：

标签： http firefox image caching browser

【解决方案1】：

我相信缓存只是指再次下载页面，因此当您再次加载页面时，图像不会再次加载，当它们被缓存时。但就加载 single 图像（由 single URL 引用）而言，它不受“永远不要使用缓存”标志的影响单页加载。

使用 PHP 我会使用脚本，例如image.php 将哈希（只是随机代码）作为参数，但只会一遍又一遍地传递相同的图像，而浏览器会一直将图像解释为不同的图像。

所以image.php?id=asdf 和image.php?id=qwer 将加载相同的图像，但在浏览器中看起来像不同的图像，并且将分别加载。

【讨论】：

如果脚本除了提供图像什么都不做（即不以任何方式记录请求），为什么还要使用脚本 - 与仅附有查询字符串的图像相比？
我已经更新了问题并将我已经知道的内容加粗:) 问题是，如果你用 JS 脚本尝试同样的事情，为什么 firefox 只在 IMAGE 上这样做（似乎），它会如果您在标头中未指定缓存，则每次重新下载它

【解决方案2】：

您在这里处理的只是部分缓存问题。

通过 URL 引用来嵌入图像的整个想法是，您可以多次引用同一个 URL，而让浏览器只加载一次。

所以基本上如果你写 HTML（比如说index.html）：

<img src="hello.jpg" />
<img src="hello.jpg" />

在这种情况下，浏览器只调用 2 个 HTTP 请求：一个用于index.html，第二个用于hello.jpg。

您需要做的是“假装”图像是从不同的 URL 加载的。为此，有多种方法。

可能最简单的解决方案是在 URL 的末尾添加一个额外的前缀。例如，如果您想加载两次图像，您可以添加：

<img src="hello.jpg?1" />
<img src="hello.jpg?2" />

这将导致浏览器发送一个 HTTP 请求来检索每个图像：一个用于hello.jpg?1，第二个用于hello.jpg?2。然而，一些网络服务器/浏览器可能仍会对此进行优化，并且只发送一个请求来简单地检索hello.jpg。

如果这不起作用，您还可以按照另一个答案中的建议尝试通过 PHP 等脚本传递您的图像。

【讨论】：

所有浏览器都应将hello.jpg?1 和hello.jpg?2 视为不同的URL。

【解决方案3】：

如果您的服务器端乐于处理虚拟查询部分，Jaakko 的解决方案应该可以满足您的需求。

这可以被视为一个错误，因为您可能会争辩说 FF 真的应该为每个图像发出一个新的 HTTP 请求。适当的缓存（客户端）仍然可以阻止这些请求实际到达不需要的网络。这种行为是否是错误的实际答案应该在 HTML 规范中，但我不知道，因为我没有调查过。

如果我是你，我会稍微改变你的方法，并使用你知道可以在任何值得关心的浏览器中工作的变通方法。

听起来您有一个输出随机/变化响应的 URI。一种不同的方法可能是使用单个 URI，但从那里响应 3xx 重定向，并带有可变/随机 Location 标头到其他可用图像。我还没有测试过，但这可能会避免问题，也允许您引用单个URI。它还允许您缓存输出的图像，如果您有一个不断变化的 URI，您将无法做到这一点。

获取/图像/随机
- 303 查看其他
- 位置：/image/xzkzkj3242hkjaha123

获取/图像/随机
- 303 查看其他
- 位置：/image/xlso847iuewrqb1231

【讨论】：

【解决方案4】：

在单个请求中缓存图像并在页面渲染期间使用缓存版本对我来说并不奇怪。但我注意到我的应用程序中有一些其他行为，这是非常不可取的。我有完全 ajaxed 的应用程序并遵循 ajax 流程：

我在页面上显示了一些http://url/image.jpg
我从 UI 上传新图片，替换 image.jpg。 URL 保持不变 - http://url/image.jpg - 但图像发生变化。所有这些都是在 ajax 请求中完成的，没有执行普通的 GET
Firefox 显示旧的image.jpg。

我认为对于FF来说它仍然是同一个请求，并且没有刷新图像的需求（甚至询问服务器是否图像过期）。简单 GET 到同一页面后，我显示了新图像。

这个恕我直言可以被视为一个错误。

【讨论】：