浏览器的HTTP缓存是否曾用于存储XMLHttpRequest响应？

Question

这是一个关于浏览器的问题，但我主要关注的是Chrome。

假设我在文件index.html中有以下代码段：

<img src='//path/to/foo.img'></img>

和foo.img每小时在我的服务器上更改。 我想在一小时内预取这个图像，这样当用户刷新页面时，从浏览器的HTTP缓存中读取更新的图像//path/to/foo.img 。

有一些我不确定的事情：

1. XHR的响应是否默认缓存？
2. 如果是这样，他们是否使用了一个单独的缓存来自浏览器在获取img，css，js等请求时使用的缓存？
3. 如果＃2的答案为否，那么为//path/to/foo.img发送XHR就足以使响应被缓存 - 然后在页面刷新时由浏览器重新使用？

Answer 1

通常浏览器缓存图像 ， js和css文件。 如果您使用图像路径或固定图像URL作为图像src那么您应该每次添加一个随机的随机数 [通常是随机数]和图像URL。 所以你的图像路径将是这样的，

<img src='//path/to/foo.img?1234567'></img>

这将确保您的先前图像或缓存图像不会加载。 始终从服务器加载新图像，但页面会一次又一次刷新。

Answer 2

要强制浏览器加载已存在于缓存中的新版本文件，请执行以下操作：

1. 使用iframe中的<img>标记创建隐藏的iframe
2. 还要为将调用location.reload(true); iframe添加一些JavaScript location.reload(true); 这将强制iframe及其中链接的所有资源从服务器重新加载并重新填充浏览器缓存。
3. 确保它只调用一次，否则你将进入无限循环。 您可以通过设置cookie，更新location.hash或检查资源计时来查看资源是否在重新加载之前通过网络获取。

您可以查看http://www.lognormal.com/blog/2012/06/17/more-on-updating-boomerang/和http://www.lognormal.com/blog/2012/06/05/updating-缓存飞旋镖/一些细节。