我只是想使用 XHR 来预缓存一些资源,但缓存的行为并不像预期的那样。
这里是问题的界限:
- 我事先知道资源 URL(当然)。
- 我不知道他们的内容类型(CSS、图像和其他的混合)。
- 它们总是同源的。
- 我控制缓存 header 。
- 无论我在乎什么,它们都可以永远缓存。
我一直认为 XHR 或多或少像使用任何其他资源一样使用浏览器缓存,但从未对其进行严格测试。这是我正在做的:
- 使用 XHR 预先请求所有资源。
- 明确设置请求 header
Cache-Control: max-age=3600
(Chrome 出于某种原因设置了max-age=0
)。 在服务器上设置以下响应 header :
缓存控制:公共(public);最大年龄=3600
日期:现在
过期时间:现在 + 1 小时
[内容类型,内容长度]
这是我看到的:
- XHR 始终 获取资源(在服务器上确认并使用开发工具)。
- 后续请求(通过图像/css/等元素)总是在冷缓存中获取(即使在 XHR 完成后)。
- 但他们总是在温暖的时候使用缓存。
我以各种方式研究过它,但这种行为似乎从未改变。
最佳答案
经过多次哀号和咬牙切齿,我相信我已经证明这种方法根本不适用于所有浏览器。到目前为止,这是我的经验:
- Firefox:很有魅力。
- Chrome:很少起作用——就好像 XHR 使用与元素不同的缓存(尽管我很确定情况并非如此;我还没有时间深入研究 Chrome代码来弄清楚到底发生了什么。
- Safari:显然是随机的。有时资源请求是从从缓存中检索的元素开始的,有时不是。我确信有办法,但从外面看似乎很疯狂。
最后,我不得不切换到创建一个隐藏的 iframe、将 script/img 元素注入(inject)其中、然后等待 iframe 窗口的 onload 事件的更狡猾但更可靠的方法。这可行,但没有提供关于加载哪些元素的细粒度反馈(从单个元素获取可靠的 onload 事件比等待整个框架更“跨浏览器棘手”。
我很想更准确地了解 Chrome/Safari 中发生了什么,但遗憾的是没有时间进一步深入。
关于javascript - 使用 XHR 预缓存资源不符合预期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25592679/