如何检测 XHR 何时返回缓存的资源？

Posted 2023-02-19

【中文标题】如何检测 XHR 何时返回缓存的资源？

【英文标题】：How to detect when XHR returns a cached resource?

【发布时间】：2012-10-01 13:52:55

【问题描述】：

我想知道是否有一种方法可以检测何时从本地缓存返回响应？可能吗？

解决方案应该是通用的，并且适用于无条件请求。在这种情况下，响应代码始终为 200 OK，但 XHR 为第二个请求返回一个缓存的资源（例如，第一个响应包含 Expires 标头，因此无需在过期日期之前向服务器请求新资源）。

【问题讨论】：

听起来不可能。在响应中添加时间戳怎么样？

我不知道，但是 Chrome 开发者工具能够显示信息； （网络窗格，大小列 - 来自缓存）所以我想知道他们是如何做到的；）（FF 的 Firebug 相同，响应标头：来自缓存）

【参考方案1】：

显然我们还可以使用Resource Timing API 来确定是否从浏览器缓存中提供了某些内容；如果 transferSize 为 0（并且 encodedBodySize >0），那么这是缓存命中。

这似乎是比其他解决方案更好的解决方案，只要您处理的是a browser that supports it。

参考：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize

【参考方案2】：

答案是日期标题

如果日期标头在发送日期之前，则响应来自缓存。 如果日期标头晚于发送请求的日期，则响应是新的。

例如

来自缓存：请求于 11:00 发送，响应日期为 10:59 无缓存：请求在 11:00 发送，响应日期为 11:01

【讨论】：

@RichBradshaw 我终于找到了通用解决方案。答案已更新。

我试过这种方法。看起来很有希望......但事实证明，如果您的内容被 Cloudfront 缓存，它也会有一个旧日期，然后您无法判断您是从本地浏览器缓存还是 Cloudfront 检索响应（除了保留关注网络活动）。

【参考方案3】：

在onreadystatechange函数中查看返回的状态码是否为304（未修改）。大致如下：

xmlhttp.onreadystatechange=function()

  if (xmlhttp.readyState==4 && xmlhttp.status==304)
    
      alert("Cached");
    
 

【讨论】：

谢谢@kmb385，但此解决方案仅适用于条件请求（If-*，例如 If-Modified-Since、If-None-Match），我正在寻找通用解决方案。问题已更新。