Chrome & Expires Header -图像缓存

Question

我有一个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+请求，直到真正过期呢？

Answer 1

有3种加载页面的方法-

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

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

简而言之，只需记住-通过在地址栏中按enter来重新加载页面即可。浏览器将支持您提供的标头。这不是特定于chrome的，它是一个W3C标准。

Answer 2

当你测试的时候要小心。我注意到，在Chrome20版本中，如果我点击F5重新加载页面，那么在网络面板中我会看到新的请求。如果我把光标放在标题栏上，在当前页面的url之后，然后按回车键，我就会从缓存中获取资源，其中的头被设置为缓存。

也是一个很好的读物：

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Answer 3

假设你已经排除了已经被建议的各种陷阱，我发现Google Chrome可以忽略缓存控制指令，除非它包含public，并且它必须是第一个。例如：

Cache-Control: public, max-age=3600

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