禁用缓存后，Chrome CORS 请求会更快吗？

Question

我的应用在此处加载视频：https://core.arc.io/guanzo/VideoOfPeopleWalking.mp4

它使用 Range 请求标头以 16Kb 的块从另一个来源加载视频。我的服务器设置了响应头Access-Control-Max-Age 到 10 分钟以防止多余的 OPTIONS 请求。

访问该链接（它是一个 HTML 页面），打开网络工具，观察获取 16Kb 块大约需要 1 秒。

现在检查“禁用缓存”，您应该会看到请求完成的速度快了很多，并且看起来有更多的并发请求。这与预期的行为相反，因为每个请求都必须触发并等待 OPTIONS 请求。

如果启用缓存，请求应该会更快，不是吗？这是怎么回事？

这是 GIF 格式的复制品：https://i.gyazo.com/ec5941829031cdd4dc684a3b53ec6c39.mp4

注意：块存储在 IndexedDB 中，因此如果您刷新页面，则需要清除 IndexedDB 以强制触发所有请求。

编辑：过滤掉任何 firestore 请求，我不确定为什么会触发这些请求，但它应该与我的问题无关。

编辑：一条新线索！ https://i.gyazo.com/bd887533a42868f748564ccda4451881.png

选中“禁用缓存”后，Chrome 将重复使用与“连接 ID”列中相同的 TCP 连接。从表面上看，这应该会使请求更快。

Answer 1

深呼吸，同时将头从调试的兔子洞中探出。

这种问题有很多解决方案。

问题：

Chrome 认为每个范围请求都在请求“相同”资源，因为 URL 相同。从技术上讲，它不是“相同”的资源，因为请求了 Content-Range 标头中指定的不同字节范围。

这是chromium docs 中关于http 缓存如何处理具有相同URL 的请求的引述。

强制缓存锁定。

缓存实现了单写-多读锁，这样 任何时候都只有一个对同一资源的网络请求在进行中 给定时间。

注意缓存锁的存在意味着没有带宽 浪费了同时重新获取相同的资源。在另一 手，它强制请求等到前一个请求完成 下载资源...

如果您在我的示例中打开每个网络请求中的“时间”选项卡，您会看到每个请求都在等待前一个请求完成。

解决方案：

强制 Chrome 识别范围请求正在返回不同的资源。

这可以通过在请求或响应上设置标头Cache-Control: no-cache, no-store 来完成。在请求上设置时，性能提升最高。其他标头值可能会起作用，我只测试了no-cache, no-store。这就解释了为什么检查“禁用缓存”会使我的请求变得如此之快，每个请求都能够使用不同的 TCP 连接，并且不会被缓存锁停止。

我想为这个SO question 提供道具，因为它给了我“啊哈！”时刻，并感谢 Firefox 没有这个问题。