Question

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

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

使用servlet filter on Tomcat 7，我现在可以在静态文件上正确设置过期标头，并且可以看到这会返回给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种加载页面的方法 -

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

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

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

Answer 2

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

也很好读：

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

Answer 3

假设您排除了已经提出的各种陷阱，我发现Google Chrome可以忽略Cache-Control指令，除非它包含public，并且它必须是第一个。例如：

Cache-Control: public, max-age=3600

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

Chrome＆amp;过期标题 - 图像缓存

3 个答案: