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

【问题标题】：Is a browser's HTTP cache ever used to store XMLHttpRequest responses?浏览器的 HTTP 缓存是否曾经用于存储 XMLHttpRequest 响应？
【发布时间】：2018-01-09 03:27:56
【问题描述】：

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

假设我在 index.html 文件中有以下 sn-p：

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

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

有几件事我不确定：

默认情况下是否会缓存 XHR 的响应？
如果是这样，它们是否使用与浏览器在获取 img、css、js 等请求时使用的缓存不同的缓存？
如果对#2 的回答是否定的，那么是否足以为//path/to/foo.img 发送XHR 以使响应被缓存-然后在刷新页面时被浏览器重新使用？

【问题讨论】：

XHR 请求与其他文件缓存在同一个缓存中，并且取决于随请求发送的标头和从服务器接收的标头。但是您应该可以在开发者工具的网络选项卡中自己观察到这一点。
一个 POST 永远不会被缓存，但一个 GET 将根据响应中的标头被缓存。这一切都在同一个缓存中，所以你可以做我认为你想做的事情（预加载图像）。按 F12（网络选项卡）并尝试一下，您会很快看到是否/何时缓存了某些内容。（只是不要对 chrome 向同一路径发送 OPTIONS 请求感到困惑）
@kjh 如果答案解决了您的问题，那么您应该接受答案。

标签： javascript html css google-chrome caching

【解决方案1】：

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

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

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

【讨论】：

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

【解决方案2】：

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

在该 iframe 中使用 <img> 标记创建一个隐藏 iframe
还将一些 JavaScript 添加到将调用 location.reload(true); 的 iframe，这将强制 iframe 和其中链接的所有资源从服务器重新加载并重新填充浏览器缓存。
确保它只调用一次，否则您将进入无限循环。您可以通过设置 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/ 了解一些详细信息。

【讨论】：