如何检查浏览器是否从Javascript缓存了资源？

有没有一种方法可以在不下载资源的情况下检查浏览器是否缓存了资源？大多数问题和答案都是旧的，我相信现在情况已经改变了，还有更好的方法。

您可以利用

fetch

API及其相应的

AbortController

来实现此功能，并留有一定的误差（预计会出现误报）

它是这样的，

fetch

获取所需的资源并附加一个信号。在短时间内中止，例如4ms。如果在很短的时间内返回fetch，它将被绝对缓存。如果提取被中止，它可能不会被缓存。下面是一些代码：

异步checkImageCached（url，waitTimeMs=4）{ const ac=新的中止控制器（） const cachePromise=fetch（url，{signal:ac.signal}） .然后（（）=>真） .catch（（）=>false） setTimeout（（）=>ac.abort（），waitTimeMs） 回报承诺 }

---

您可以利用

fetch

API及其相应的

AbortController

来实现此功能，并留有一定的误差（预计会出现误报）

它是这样的，

fetch

获取所需的资源并附加一个信号。在短时间内中止，例如4ms。如果在很短的时间内返回fetch，它将被绝对缓存。如果提取被中止，它可能不会被缓存。下面是一些代码：

异步checkImageCached（url，waitTimeMs=4）{ const ac=新的中止控制器（） const cachePromise=fetch（url，{signal:ac.signal}） .然后（（）=>真） .catch（（）=>false） setTimeout（（）=>ac.abort（），waitTimeMs） 回报承诺 }

---

不幸的是，目前仅适用于Firefox，但另一种选择是使用，尽管它仅适用于同一来源上的请求（因为它还需要

模式：“同一来源”

）：

仅当缓存时-浏览器在其HTTP缓存中查找匹配的请求

• 如果存在匹配项（新鲜或过时），则将从缓存中返回该匹配项

• 如果不匹配，浏览器将以504网关超时状态响应

---

不幸的是，目前仅适用于Firefox，但另一种选择是使用，尽管它只适用于同一来源上的请求（因为它还需要

模式：“同一来源”

）：

仅当缓存时-浏览器在其HTTP缓存中查找匹配的请求

• 如果存在匹配项（新鲜或过时），则将从缓存中返回该匹配项

• 如果不匹配，浏览器将以504网关超时状态响应

---

无需下载resource@JaromandaX它很快就被中止了，因此无法下载。你认为setTimeout会在4ms内触发吗？我认为20ms是最短的可用时间（虽然那是几年前的事了），这一切都很好：p我从这个答案中了解到了AbortController，所以+1:p是的，在你建议之后，我尝试了一下，并考虑到使用console.log的延迟，4ms超时会在4或5ms内触发！无需下载resource@JaromandaX它很快就被中止了，因此无法下载。你认为setTimeout会在4ms内触发吗？我认为20ms是最短的可用时间（虽然那是几年前的事了），这一切都很好：p我从这个答案中了解到了AbortController，所以+1:p是的，在你建议之后，我尝试了一下，并考虑到使用console.log的延迟，4ms超时会在4或5ms内触发！需要“同一来源”吗？@Seaskyways看起来是这样，是的，这很不幸，因为一些跨站点资源没有CORS限制，仍然可以通过JSis“同一来源”访问这些资源？Seaskyways看起来是这样，是的，这很不幸，因为一些跨站点资源没有CORS限制，仍然可以通过JS访问

fetch(urlOnSameOrigin, { mode: 'same-origin', cache: 'only-if-cached'})
  .then((response) => {
    if (response.ok) {
      console.log('Cached');
    } else if (response.status === 504) {
      console.log('Not cached');
    }
  })
  .catch(() => {
    console.log('Network error');
  });