javascript - 使用 XHR 预缓存资源不符合预期

Question

我只是想使用 XHR 来预缓存一些资源，但缓存的行为并不像预期的那样。

这里是问题的界限:

• 我事先知道资源 URL(当然)。
• 我不知道他们的内容类型(CSS、图像和其他的混合)。
• 它们总是同源的。
• 我控制缓存 header 。
• 无论我在乎什么，它们都可以永远缓存。

我一直认为 XHR 或多或少像使用任何其他资源一样使用浏览器缓存，但从未对其进行严格测试。这是我正在做的:

• 使用 XHR 预先请求所有资源。
• 明确设置请求 header Cache-Control: max-age=3600(Chrome 出于某种原因设置了 max-age=0)。

• 在服务器上设置以下响应 header :

  • 缓存控制:公共(public)；最大年龄=3600
  • 日期:现在
  • 过期时间:现在 + 1 小时
  • [内容类型，内容长度]

这是我看到的:

• XHR 始终 获取资源(在服务器上确认并使用开发工具)。
• 后续请求(通过图像/css/等元素)总是在冷缓存中获取(即使在 XHR 完成后)。
• 但他们总是在温暖的时候使用缓存。

我以各种方式研究过它，但这种行为似乎从未改变。

Answer 1

经过多次哀号和咬牙切齿，我相信我已经证明这种方法根本不适用于所有浏览器。到目前为止，这是我的经验:

• Firefox:很有魅力。
• Chrome:很少起作用——就好像 XHR 使用与元素不同的缓存(尽管我很确定情况并非如此；我还没有时间深入研究 Chrome代码来弄清楚到底发生了什么。
• Safari:显然是随机的。有时资源请求是从从缓存中检索的元素开始的，有时不是。我确信有办法，但从外面看似乎很疯狂。

最后，我不得不切换到创建一个隐藏的 iframe、将 script/img 元素注入(inject)其中、然后等待 iframe 窗口的 onload 事件的更狡猾但更可靠的方法。这可行，但没有提供关于加载哪些元素的细粒度反馈(从单个元素获取可靠的 onload 事件比等待整个框架更“跨浏览器棘手”。

我很想更准确地了解 Chrome/Safari 中发生了什么，但遗憾的是没有时间进一步深入。