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

I'm wondering if there is a way how to detect when a response is returned from a local cache? Is it possible?

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

The solution should be general and work for unconditional requests. In this case, the response code is always 200 OK, but XHR returns a cached resource for the second request (e.g. the first response contains Expires header, so there is no need to ask a server for a new resource before the expiration date).

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

3 个解决方案

#1

The answer is Date header

答案是日期标题

If date header is before send date then a response is coming from a cache.
如果日期标题在发送日期之前，则响应来自缓存。
If date header is after date when a request was sent then a response is fresh.
如果日期标题是在发送请求的日期之后，那么响应是新鲜的。

e.g.

例如

from cache: request was sent at 11:00, response date is 10:59
来自缓存：请求是在11:00发送的，回复日期是10:59
no cache: request was sent at 11:00, response date is 11:01
没有缓存：请求是在11:00发送的，响应日期是11:01

#2

Apparently we can also use the Resource Timing API to determine whether something was served from browser cache; if the transferSize is 0 (and the encodedBodySize is >0) then that's a cache hit.

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

That seems like a better solution than the others, as long as you're dealing with a browser that supports it.

这似乎是比其他解决方案更好的解决方案，只要您处理支持它的浏览器。

Ref: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize

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

#3

Check to see if the status code returned is 304 (not modified) in the onreadystatechange function. Something along the lines of:

检查onreadystatechange函数中返回的状态代码是否为304（未修改）。有点像：

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==304)
    {
      alert("Cached");
    }
}

#1