2

我有一个包含几百个小图像的 Web 应用程序，并且在加载时表现非常糟糕。

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

在 Tomcat 7 上使用servlet 过滤器，我现在在静态文件上正确设置了 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 多个请求，直到真正过期为止？

4

3 回答 3

9

有 3 种加载页面的方式 -

  1. 将 url 放在地址栏中并按 Enter 键，这相当于从超链接导航（默认浏览行为）。这将尊重 Expires 标头，并首先检查静态内容的缓存是否有效，然后如果 Expires 标头时间在将来，它将直接从缓存中加载它。在这种情况下，浏览器根本不会向服务器发出任何请求。如果缓存的内容无效，它将向服务器发出请求。

  2. 按 f5 刷新页面。这基本上会向服务器发送一个 if-modified 标头并验证内容是否已更改。如果它已更改，您将收到 200 响应，否则将收到 304 响应。在这两种情况下，图像都不会加载到页面上，直到收到来自服务器的响应。

  3. 按 ctrl+f5 将强制清除所有缓存并重新加载所有图像。它不会花时间验证图像是否已更改或未使用标题。

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

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

于 2013-01-22T18:45:48.470 回答
2

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

也是一个很好的阅读：

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

于 2012-08-07T15:11:55.200 回答
0

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

Cache-Control: public, max-age=3600

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

于 2014-07-31T15:42:10.147 回答