是否可以缓存损坏的图像？

Question

我正在寻找一种方法来确保浏览器缓存无效/损坏的“图像”，以便在重新获取时立即加载。

以下是我特别感兴趣的两个场景。

1) 第一个是我尝试从包含不同类型资源的 url 加载图像（例如，在本例中为 text/html）。请求状态为200，但资源不是图片。

2) 第二个是我尝试加载根本不存在的图像。请求状态为404。

// takes ~500ms to load
const urlText = "https://goodreads.com"
const brokenTextImage = new Image();
brokenTextImage.src = urlText;

// takes ~500ms to load
const url404 = "https://broken.com/${gres.psm}.png"
const broken404Image = new Image();
broken404Image.src = url404; 

// looking to cache - should take ~0ms to load
const cachedTextImage = new Image();
cachedBrokenTextImage.src = urlText; 

// looking to cache - should take ~0ms to load
const cached404Image = new Image();
cached404Image.src = url404;

在这两种情况下，我都希望将加载时间减少到 ~0 毫秒，就像您对有效图像 url 的缓存机制所期望的那样。这可能吗？

---

请参阅此处的图片以获取此失败缓存的示例。您可以看到 404 图像的获取次数，以及 goodreads“图像”以及来自“磁盘缓存”的成功图像示例

图像响应时间：

Answer 1

现代浏览器带有一个叫做服务工作者的东西 -> https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

服务工作者启动并运行后，您可以注册一个 fetch 事件 -> https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent

这样您就可以完全控制资源的缓存方式。 另请注意，fetch 事件会影响所有资源加载，包括 HTML / Ajax 和当然 fetch。