Chrome & Expires 标头 - 图像缓存答案

【问题标题】：Chrome & Expires Header - Image CachingChrome & Expires 标头 - 图像缓存
【发布时间】：2012-04-26 12:19:40
【问题描述】：

我有一个包含几百个小图像的 Web 应用程序，并且在加载时性能很差。

为了解决这个问题，我想在浏览器中缓存静态文件。

使用servlet filter on Tomcat 7，我现在在静态文件上正确设置了 expires 标头，并且可以看到它返回给 Chrome：

Accept-Ranges:bytes
Cache-Control:max-age=3600
Content-Length:40284
Content-Type:text/css
Date:Sat, 14 Apr 2012 09:37:04 GMT
ETag:W/"40284-1333964814000"
**Expires:Sat, 14 Apr 2012 10:37:05 GMT**
Last-Modified:Mon, 09 Apr 2012 09:46:54 GMT
Server:Apache-Coyote/1.1

但是，我注意到 Chrome 仍在为每个静态资源在重新加载时往返于服务器，发送一个 if-modified 标头并从 Tomcat 获得正确的 304 Not Modified 响应。

有什么方法可以让 Chrome 在真正过期之前避免向服务器发出这 100 多个请求？

【问题讨论】：

这些图像是不断变化还是大部分保持不变？
有人问过类似的问题：Chrome - why is it sending if-modified-since requests?。不确定它是否真的得到了回答，但那里有一些想法......

标签： http google-chrome tomcat caching

【解决方案1】：

有 3 种加载页面的方式 -

将 url 放在地址栏中并按 Enter，这相当于从超链接导航（默认浏览行为）。这将尊重 Expires 标头，并将首先检查静态内容的缓存是否有效，然后如果 Expires 标头时间在未来，它将直接从缓存中加载它。在这种情况下，浏览器根本不会向服务器发出任何请求。如果缓存的内容无效，它将向服务器发出请求。
按 f5 刷新页面。这基本上会向服务器发送一个 if-modified 标头并验证内容是否已更改。如果它已更改，您将收到 200 响应，否则将收到 304 响应。在这两种情况下，图像都不会加载到页面上，直到收到来自服务器的响应。
按 ctrl+f5 将强制清除所有缓存并重新加载所有图像。它不会花时间验证图像是否已更改或未使用标题。

我猜你所期待的行为是第一种。您唯一应该注意的是加载页面的方式。通常人们不会按 f5 或 ctrl+f5 ，因此您的静态内容不会每次都重新验证。它将强制清除缓存并重新加载页面上的每个静态项目。

简而言之，请记住 - 通过在地址栏中按 Enter 来重新加载页面。浏览器将尊重您提供的标题。这不是特定于 chrome 的，它是 W3C 标准。

【讨论】：

【解决方案2】：

测试时要小心。我注意到在 Chrome 版本 20 中，如果我按 F5 重新加载页面，然后在网络面板中我会看到新请求。如果我将光标放在标题栏上，在当前页面 url 之后，然后按回车，我会从缓存中获取资源，而标题被设置为缓存。

【讨论】：

【解决方案3】：

假设您已经排除了已经建议的各种陷阱，我发现谷歌浏览器可以忽略 Cache-Control 指令，除非它包含public，并且它必须是第一个。例如：

Cache-Control: public, max-age=3600

在我的实验中，我还从服务器响应中删除了 ETag，因此这可能是一个因素，但我没有回去检查。

【讨论】：