我有一个包含许多小图片(图标)的页面。与chrome一起使用时,每次重新加载页面时,chrome都会使用if-modified-since标头从服务器请求每个图标。
所有图标都包含expires和max-age标头。 Firefox从其缓存中加载图像。
为什么Chrome会这样做,我该如何预防呢?
由于
答案 0 :(得分:14)
您是否检查过请求标题?
“'Cache-Control'始终设置为'max-age = 0',无论您按Enter键,f5还是ctrl + f5。除非您启动Chrome并输入网址并按Enter键。”
http://techblog.tilllate.com/2008/11/14/clientside-cache-control/
答案 1 :(得分:13)
使用chrome无论您是刷新页面还是仅仅访问它都很重要。
当您刷新时,chrome将为每个文件ping服务器,无论它们是否已被缓存。如果文件尚未修改,您应该看到 304 Not Modified 响应。如果文件已被修改,您将看到 200 OK 响应。
如果不刷新,缓存的文件将具有 200 OK 状态,但如果查看网络面板的尺寸/内容列,您会看到(来自缓存)
答案 2 :(得分:12)
如果RFC不是有效日期,则Google Chrome会忽略Expires
标头。例如,它总是需要将天数指定为两位数。 5月1日应设置为“5月1日”(不是“5月1日”),依此类推。 Firefox接受它们,这会误导用户问题出现在浏览器(例如Chrome)上,而不是标题值本身。
因此,如果您手动设置过期日期(不使用mod_expires
或类似的东西来计算实际日期),我建议您使用REDbot检查静态文件标题。
答案 3 :(得分:9)
使用Chrome检查器的快速实验表明,这只会在重新加载页面时发生,而不是在正常加载页面时发生。 Chrome只是试图刷新其缓存。考虑一下 - 如果您将Expires
和Max-Age
设置为几十年,您是否要求浏览器缓存该资源并且从不检查它是否得到更新?它尽可能地缓存资源,但是当需要刷新页面时,它希望确保整个页面被刷新。其他浏览器肯定也会这样做(虽然有些人可以选择在刷新前等待的小时数)。
感谢现代浏览器和服务器,刷新大量图标的速度不会像您想象的那么慢 - 请求被流水线化以消除多个往返延迟,If-Modified-Since
标头的整个目的是允许服务器比较时间戳并返回“未修改”状态代码。这将发生在页面需要的每个资源上,但浏览器将能够立即发出所有请求并验证它们都没有更改。
也就是说,您可以采取一些措施来简化这一过程:
在Chrome的检查器中,使用资源标签查看其加载方式。如果没有请求标头,则直接从缓存加载资源。如果您看到304 Not Modified
,则刷新资源但不需要再次下载。如果您看到200 OK
,则会再次下载。
在Chrome的检查器中,使用审核标签查看其对资源可缓存性的看法,以防某些缓存标头不是最佳。
所有这些If-Modified-Since
个请求和304个响应都可以相加,即使它们只包含标题。将您的图像组合成精灵以减少请求数量。
答案 4 :(得分:4)
现代浏览器的缓存行为越来越复杂和智能化。请阅读http://blogs.msdn.com/b/ie/archive/2010/07/14/caching-improvements-in-internet-explorer-9.aspx以获取一些示例和更多详细信息。
弗洛里安说,不要打架: - )
答案 5 :(得分:0)
听起来它试图通过询问服务器自上次请求后图像是否发生了变化来避免过时的缓存。听起来像是一件好事,而不是你想要阻止的东西。
答案 6 :(得分:0)
假设您正在运行Apache,您可以尝试为文件系统中的某些文件类型和/或位置显式设置缓存生存期。
<FilesMatch ".(jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=604800, public" # 7 days
</FilesMatch>
或类似
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
通常,我会在单个目录中对文件类型进行分组,并相应地设置生命周期。
浏览器在这个年龄段过期之前不应该请求文件,但可能并不总是尊重它。您可能需要/需要使用Last-Modified和ETag标头。网上有很多关于此的信息。