Google Chrome 未缓存图像
Google Chrome is not caching images
我在 Rails 上尝试优化我在 Ruby 中的应用程序，我意识到我的应用程序中的图片是加载时间最长的，但我还注意到另一个问题是 google chrome 没有缓存图像。
我注意到这一点是因为在 Google Developers Console 中您可以看到 Google Chrome 请求加载在图像真正加载之前被取消的图像。
这可以在这里看到，首先我打开 Google Developers Console，然后刷新页面，在第一个请求中你可以看到那些图像，但它们立即被取消了。
之后您可以看到实际加载图像的请求。
我不明白为什么会发生这种情况，如果在响应 headers 中您可以看到 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 中第一次加载图像，但随后有时我加载相同的视图我什至都没有注意到重新加载，它很漂亮，为什么 google Chrome 不是那样？ Google Chrome 行为如此怪异正常吗？
看起来 Chrome 处理图像缓存的方式不同。你在做什么类型的重新加载（点击链接，在地址栏中按回车键，Ctrl+r）？看起来如果您在搜索栏中按 enter，它会遵守 max-age 但如果您使用 Ctrl+r Chrome 会将 max-age 设置为 0.
Chrome doesn't cache images/js/css
分析浏览器缓存时最重要的是要意识到"Status Code"。在你的例子中，你可以看到你有一个“304”，它代表 "Not Modified" 这意味着浏览器 "could potentially use it's cache"。所以你实际上是在缓存。缓存 != 未访问您的 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 和 last-modified 发送到您的网络服务器，然后您的网络服务器查看这些元并说 "Nope, this file hasn't changed, so feel free to use your cache"，就是这样。它实际上不会再次发送文件。您可以看到 "Size" 比“200”状态代码少得多，网络服务器正在发送文件，时间也应该短得多。
在 Chrome 中，您可以通过选中“网络”选项卡中的 "Disable cache" 选项来强制 "non-caching"。
希望对您有所帮助！
您可以使用清单文件强制缓存。网上有很多关于该主题的文档。这是一个开胃菜：http://www.w3schools.com/html/html5_app_cache.asp
请求 headers 包含 max-age=0。尝试将其设置为一个大数字！
我在 Rails 上尝试优化我在 Ruby 中的应用程序，我意识到我的应用程序中的图片是加载时间最长的，但我还注意到另一个问题是 google chrome 没有缓存图像。
我注意到这一点是因为在 Google Developers Console 中您可以看到 Google Chrome 请求加载在图像真正加载之前被取消的图像。
这可以在这里看到，首先我打开 Google Developers Console，然后刷新页面，在第一个请求中你可以看到那些图像，但它们立即被取消了。
之后您可以看到实际加载图像的请求。
我不明白为什么会发生这种情况，如果在响应 headers 中您可以看到 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 中第一次加载图像，但随后有时我加载相同的视图我什至都没有注意到重新加载，它很漂亮，为什么 google Chrome 不是那样？ Google Chrome 行为如此怪异正常吗？
看起来 Chrome 处理图像缓存的方式不同。你在做什么类型的重新加载（点击链接，在地址栏中按回车键，Ctrl+r）？看起来如果您在搜索栏中按 enter，它会遵守 max-age 但如果您使用 Ctrl+r Chrome 会将 max-age 设置为 0.
Chrome doesn't cache images/js/css
分析浏览器缓存时最重要的是要意识到"Status Code"。在你的例子中，你可以看到你有一个“304”，它代表 "Not Modified" 这意味着浏览器 "could potentially use it's cache"。所以你实际上是在缓存。缓存 != 未访问您的 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 和 last-modified 发送到您的网络服务器，然后您的网络服务器查看这些元并说 "Nope, this file hasn't changed, so feel free to use your cache"，就是这样。它实际上不会再次发送文件。您可以看到 "Size" 比“200”状态代码少得多，网络服务器正在发送文件，时间也应该短得多。
在 Chrome 中，您可以通过选中“网络”选项卡中的 "Disable cache" 选项来强制 "non-caching"。
希望对您有所帮助！
您可以使用清单文件强制缓存。网上有很多关于该主题的文档。这是一个开胃菜：http://www.w3schools.com/html/html5_app_cache.asp
请求 headers 包含 max-age=0。尝试将其设置为一个大数字！