谷歌浏览器不缓存图片

Question

我正在尝试在 Ruby on Rails 中优化我的应用程序，我意识到我的应用程序中的图片加载时间最长，但我也注意到另一个问题，即 google chrome 不是缓存图像。

我注意到这一点是因为在 Google Developers Console 中，您可以看到 Google Chrome 请求加载在图像真正加载之前被取消的图像。

可以在这里看到，首先我打开 Google Developers Console，然后刷新页面，在第一个请求中，您可以看到其中的图像，但它们立即被取消。

之后就可以看到实际加载图片的请求了。

如果在响应标头中您可以看到 Cache Control 设置为 public 和 max-age = 31536...，我不明白为什么会发生这种情况

我以这种方式将图像放入我的应用程序中：

<div class="col-xs-3"><%= image_tag "#{@hero.id}/ability_1.png", class: "center-block"%></div>

并且图像被组织在app/assets/images的文件夹中

是否有解决此问题的 RoR 方法？

编辑：现在在 Windows 中测试我的应用程序（在 Heroku 中）我注意到实际上 Google Chrome 有时会缓存图像，但它发生的概率为 50%（当我在 Ubuntu 中开发它一次都没有工作），而在 Firefox 第一次加载图像时，但随后加载相同的视图我什至都没有注意到重新加载，这很漂亮，为什么谷歌 Chrome是不是这样？谷歌浏览器的行为如此怪异是正常的吗？

Answer 1

在分析浏览器缓存时要意识到的最重要的事情是“状态代码”。在您的示例中，您可以看到“304”代表“未修改”，这意味着浏览器“可能会使用它的缓存”。所以你实际上是在缓存。缓存！= 没有访问您的网络服务器。

根据Mozilla定义：

这用于缓存目的。它告诉客户响应没有被修改。因此，客户端可以继续使用相同的缓存版本的响应。

它将 etag 和 last-modified 发送到您的网络服务器，然后您的网络服务器查看这些元数据并说“不，此文件没有更改，所以请随意使用您的缓存”，仅此而已。它实际上不会再次发送文件。您可以看到“大小”比“200”状态代码时要小得多，网络服务器正在发送文件，时间也应该更短。

在 Chrome 中，您可以通过选中“网络”选项卡中的“禁用缓存”选项来强制“非缓存”。

希望有帮助！

Answer 2

看起来 Chrome 确实以不同的方式处理图像缓存。你在做什么类型的重新加载（点击链接，在地址栏中按回车键，Ctrl+r）？看起来如果您在搜索栏中按 Enter 键，它将尊重 max-age 但如果您使用 Ctrl+r Chrome 会将 max-age 设置为 0。

expires_in max-age cache control doesn't work

Chrome doesn't cache images/js/css

Answer 3

您可以使用清单文件强制缓存。网络上有很多关于该主题的文档。这是一个首发：http://www.w3schools.com/html/html5_app_cache.asp

Answer 4

请求标头包含 max-age=0。尝试将其设置为一个大数字！