Google Chrome浏览器未缓存图像 [英] Google Chrome is not caching images

问题描述

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

I'm trying to optimize my application in Ruby on Rails, and I realized that the pictures in my application is what most long does it take to load, but I also noticed another problem, which is that google chrome isn't caching the images.

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

I noted this because in the Google Developers Console you can see that Google Chrome makes a request to load the images that are canceled before the images are truly loaded.

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

This can be seen here, first I open the Google Developers Console, then refresh the page and within the first requests there you can see the ones of the images, but they are canceled immediately.

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

After that you can see the requests that actually loaded the images.

我不明白为什么会这样，如果您在响应标头中看到 Cache Control 设置为 public 且 max-age =31536 ...

I don't understand why is this happening if in the response headers you can see that the Cache Control is set to public with max-age = 31536...

我以这种方式将图像放置在应用程序中:

I put the images in my application this way:

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

这些图像被组织在 app/assets/images

有RoR方法可以解决此问题吗?

Is there a RoR way to fix this?

编辑:现在在Windows中测试我的应用程序(在Heroku中)时，我注意到实际上Google Chrome有时会缓存图像，但是这种情况发生的时间大约是50％(当我是在Ubuntu上开发的，它一次都无法工作)，而在Firefox中，第一次是加载图像，但是随后的几次，我加载同一视图时，我什至都没有注意到重新加载，这很漂亮，为什么使用谷歌浏览器是不是这样?谷歌浏览器的行为如此怪异是正常现象吗?

Edit: Now testing my app (which is in Heroku) in Windows I noticed that in fact Google Chrome caches the images sometimes, but it happens like the 50% of the times (and when I was in Ubuntu in development it didn't work a single time), while in firefox the first time the images are loaded, but the subsequent times I load the same view I can't even notice the reload, it's beatiful, Why google Chrome is not like that? Is normal that Google Chrome acts so weird?

推荐答案

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

The most important thing to realize when analyzing browser caching is the "Status Code". In your example, you can see you got a "304", which stands for "Not Modified" Which means the browser "could potentially use it's cache". So you ARE in fact caching. Caching != Not hitting your web server.

根据 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服务器正在发送该文件，并且时间也应该短得多.

It sends the etag and last-modified to your web server, and your web server then looks at those meta and say "Nope, this file hasn't changed, so feel free to use your cache", and that's it. It actually does not send the file again. You can see that the "Size" is much less then when it's a "200" status code, where the web server IS sending the file, and the timing should me much shorter as well.

在Chrome中，您可以通过选中网络"标签中的禁用缓存"选项来强制执行非缓存".

In Chrome you can force "non-caching" by checking the "Disable cache" option in the Network tab.

希望有帮助！

这篇关于Google Chrome浏览器未缓存图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！