ruby-on-rails - Google Chrome浏览器未缓存图像

Question

我正在尝试在Ruby on Rails中优化我的应用程序，但我意识到应用程序中的图片是加载文件所需的最长时间，但是我也注意到了另一个问题，那就是Google chrome无法缓存图像。

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

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



之后，您可以看到实际加载图像的请求。



我不明白为什么会这样，如果您在响应 header 中看到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中是第一次加载图像，但是随后的时间我加载相同的 View 时，我什至都没有注意到重新加载，这很漂亮，为什么Google Chrome浏览器不是这样？ Google Chrome的行为如此怪异是正常现象吗？

Answer 1

分析浏览器缓存时要实现的最重要的事情是“状态代码”。在您的示例中，您会看到一个“304”，代表“未修改”，这表示浏览器“可能使用其缓存”。因此，您实际上是在缓存。缓存!=未命中您的Web服务器。

根据Mozilla的定义:

This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.

它将etag和最后修改的内容发送到您的Web服务器，然后您的Web服务器查看这些meta并说:“不，此文件未更改，请随时使用您的缓存”，仅此而已。实际上，它不会再次发送文件。您会看到，“大小”比状态代码为“200”时要小得多，Web服务器正在发送该文件，并且时间也应该短得多。

在Chrome浏览器中，您可以通过选中“网络”标签中的“禁用缓存”选项来强制执行“非缓存”。

希望对您有所帮助!