使用XHR预先缓存不按预期运行的资源

Question

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

以下是问题的界限：

• 我事先知道资源网址（当然）。
• 我不知道他们的内容类型（CSS，图片和其他内容的混合）。
• 他们永远是同源的。
• 我控制缓存标题。
• 我可以永远缓存它们。

我一直认为XHR使用浏览器缓存或多或少像其他资源一样，但从未严格测试过。这就是我正在做的事情：

• 使用XHR预先申请所有资源。
• 明确设置请求标头Cache-Control: max-age=3600（由于某种原因，Chrome正在设置max-age=0。

• 在服务器上设置以下响应标头：

  • Cache-control: public; max-age=3600
  • Date: now
  • Expires: now + 1 hour
  • [Content-Type, Content-Length]

这就是我所看到的：

• XHR 始终获取资源（在服务器上使用dev工具确认）。
• 后续请求（通过image / css / etc元素）总是在冷缓存上获取（即使在XHR完成后）。
• 但他们总是在温暖的时候使用缓存。

我以各种方式嘲笑它，但这种行为似乎永远不会改变。

Answer 1

经过多次哀嚎和咬牙切齿之后，我相信我已经证明这种方法不会在所有浏览器上都能使用。这是我迄今为止的经历：

• Firefox ：吸引人的魅力。
• Chrome ：很少有人工作 - 好像XHR使用与元素不同的缓存（尽管我很确定并非如此;我还没有时间深入研究Chrome代码，以确定究竟发生了什么。
• Safari ：显然是随机的。有时资源请求从缓存中检索的元素启动，有时不会。我确定这是一种方法，但它看起来很疯狂。

最后，我不得不转而采用更为谨慎但又可靠的方法来创建隐藏的iframe，将script / img元素注入其中，然后等待iframe窗口的onload事件。这是有效的，但是没有提供关于加载哪些元素的细粒度反馈（从单个元素获得可靠的onload事件更多＆＃34;跨浏览器棘手＆＃34;而不是仅仅等待整个框架。

我希望更准确地了解Chrome / Safari中发生的事情，但遗憾的是没有时间深入挖掘。