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

Question

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

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

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

我的服务器上的foo.img每小时都会更改。我想在整点时预取此图像，以便当用户刷新页面时，更新的图像//path/to/foo.img将从浏览器的HTTP缓存中读取。

有几件事情我不确定：

1. 默认情况下，XHR的响应是否被缓存？
2. 如果是这样，它们是否使用与获取img、css、js等请求时浏览器使用的缓存不同的单独缓存？
3. 如果问题2的答案是否定的，那么仅发送一个XHR请求//path/to/foo.img是否足以导致响应被缓存，然后在刷新页面时由浏览器重复使用？

- kjh

---

XHR请求被缓存在与其他文件相同的缓存中，这取决于请求发送时和从服务器接收到的头信息。但是您应该能够在开发者工具的网络选项卡中观察到这一点。 - t.niese

一个POST请求永远不会被缓存，但是GET请求会根据响应头被缓存。所有的内容都会被放在同一个缓存中，所以你可以做你想做的事情（预加载图片）。按F12键（网络选项卡），然后试一下，你很快就会看到是否有东西被缓存了。（只是不要被Chrome发送到相同路径的OPTIONS请求所困扰） - Rory

如果答案解决了您的问题，那么您应该接受该答案。 - Ataur Rahman Munna

Answer 1

通常浏览器会缓存图像、js和css文件。如果您正在使用图像路径或固定图像URL作为图像的src，则应每次将随机nonce（通常是随机数字）添加到图像URL中。因此，您的图像路径将类似于：

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

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

- Ataur Rahman Munna

---

这不是我要找的。我的问题不在于我不知道如何强制浏览器获取文件的最新版本。我的问题在于我需要异步地预取文件的新版本，以便在刷新页面时，新文件从缓存中检索而不是通过网络获取。 - kjh

Answer 2

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

1. 创建一个带有<img>标签的隐藏iframe
2. 还要在该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-cached-boomerang/以获取更多详细信息。

- bluesmoon