禁用缓存后，Chrome中的CORS请求速度更快？

Question

我的应用程序在这里加载视频：https://core.arc.io/guanzo/VideoOfPeopleWalking.mp4 它使用“Range”请求头从另一个源以16Kb的块加载视频。我的服务器已将响应头中的“Access-Control-Max-Age”设置为10分钟，以防止冗余的OPTIONS请求。

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

现在勾选“禁用缓存”，您应该看到请求完成得更快，并且似乎存在更多的并发请求。这与预期的行为相反，因为每个请求都需要发出并等待OPTIONS请求。

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

以下是GIF形式的重现：https://i.gyazo.com/ec5941829031cdd4dc684a3b53ec6c39.mp4。

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

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

编辑：新的线索！https://i.gyazo.com/bd887533a42868f748564ccda4451881.png 当勾选“禁用缓存”时，Chrome将重用与“Connection ID”列中看到的相同的TCP连接。理论上，这应该使请求更快。

- Eric Guan

---

有没有办法在 GIF 中重现您所做的事情？ - Arend

你应该能够访问我发布的链接（它会导向一个HTML页面），并执行我在问题中描述的相同步骤。 - Eric Guan

很棒的自问自答。这真的很有用。 - Boaz

Answer 1

深呼吸，同时探出调试兔子洞。

这是一个有许多解决方案的问题。

问题：

Chrome认为每个范围请求都是请求“相同”的资源，因为URL相同。实际上，这不是“相同”的资源，因为在Content-Range头中指定了请求的不同字节范围。

以下是chromium文档中关于http缓存如何处理具有相同URL的请求的引用。

执行缓存锁定。

缓存实现单个写入器-多个读取器锁，以便 同时只有一个网络请求正在获取相同的资源。

请注意，缓存锁的存在意味着没有带宽 浪费重新获取同一资源。另一方面，它强制请求等待直到先前的请求完成 下载资源...

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

解决方法：

强制Chrome认识到范围请求返回不同的资源。

可以通过在请求或响应上设置头Cache-Control：no-cache，no-store来实现。将其设置为请求时性能提高最大。其他头值可能也可以使用，我只测试了no-cache，no-store。这就解释了为什么选中“禁用缓存”会使我的请求更快，每个请求都能使用不同的TCP连接，并且不受缓存锁的限制。

我要感谢这个SO问题给了我“哦！”时刻，并且Firefox没有这个问题。

- Eric Guan