我刚读过这篇文章:https://developer.mozilla.org/en/HTTP_Caching_FAQ
有一个firefox行为(我想其他一些浏览器)我想了解:
如果我采取任何网页并尝试在javascript中多次插入相同的图像,即使我指定所有需要的标题来说“不要使用缓存”,图像也只下载ONCE。 (见文章)
我知道有一些解决方法(比如addind查询字符串到网址末尾等)但为什么firefox就是这样做的,如果我说一个图像不需要缓存,为什么是当我尝试重新插入时,图像仍然从缓存中获取?
另外,这个用什么缓存? (我猜这是内存缓存)
例如,动态包含的行为是否相同? ANSWSER不是:) 我刚测试了它,js脚本的相同标题会在每次将脚本附加到DOM时使firefox重新下载。
PS:我知道你想知道为什么我需要这样做(多次添加相同的图像并强制重新下载,但这是我们的应用程序的工作方式)谢谢
好的答案是:即使你指定他不必缓存它们,firefox也会将当前页面加载的图像存储在内存缓存中。
你无法改变这种行为,但这很奇怪,因为它对于javascript文件来说并不相同,例如
有人可以解释或链接到描述firefox缓存如何工作的文档吗?
答案 0 :(得分:4)
你在这里处理的只是部分缓存问题。
通过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
。但是,某些Web服务器/浏览器仍然可以对此进行优化,并且只发送一个请求来简单地检索hello.jpg
。
如果这不起作用,您也可以尝试通过PHP等脚本传递图像,如另一个答案所示。
答案 1 :(得分:1)
我认为缓存只是指另一次下载页面,因此当您第二次加载页面时,图像在缓存时不会再次加载。 但是,只要加载了一个单个图像(由单个 URL引用),它就不会受到“不要使用缓存”-flag的影响。单页加载。
使用PHP我会使用脚本,例如image.php将哈希(只是随机代码)作为参数但只反复传递相同的图像,而浏览器会一直将图像解释为不同的图像。
因此,image.php?id=asdf
和image.php?id=qwer
会加载相同的图片,但看起来像浏览器的不同图像,并会单独加载。
答案 2 :(得分:1)
Jaakko的解决方案应该可以满足您的需求,前提是您的服务器端很乐意处理虚拟查询部分。
这可以看作是一个错误,因为你可以说FF应该真的为每个图像发出一个新的HTTP请求。适当的缓存(客户端)仍然可以阻止这些请求实际访问不需要的网络。这个行为是否是错误的实际答案应该在HTML规范中,但我不知道,因为我没有调查过。
如果我是你,我会改变你的方法并使用你知道可以在任何值得关注的浏览器中使用的解决方法。
听起来你有一个输出随机/变化响应的URI。一种不同的方法可能是使用单个URI,但从那里使用3xx重定向以及其他可用图像的变化/随机位置标头进行响应。我没有测试过它但是这可以避免问题并且还允许您引用单个URI URI。它还允许您缓存输出的图像,如果您有一个不断变化的URI,则无法执行此操作。
GET / image / random
- 303见其他
- 地点:/ image / xzkzkj3242hkjaha123
GET / image / random
- 303见其他
- 地点:/ image / xlso847iuewrqb1231
答案 3 :(得分:0)
在单个请求中缓存图像并在页面渲染期间使用缓存版本并不奇怪。但我注意到我的应用程序中存在其他一些行为,这是非常不受欢迎的。我已经完全了ajaxed app并遵循ajax流程:
http://url/image.jpg
http://url/image.jpg
- 但图片会发生变化。所有这些都是在ajax请求中完成的,并且没有执行普通的GET image.jpg
。 我认为对于FF来说,它仍然是相同的单一请求,并且没有要求刷新图像(甚至在图像过期时询问服务器)。在简单GET到同一页面后,我显示了新图像。
这个恕我直言可以被视为一个错误。