我的应用程序在此处加载视频：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将重新使用与“连接ID”列相同的TCP连接。表面上，这应该使请求更快。
答案 0 :(得分：7)
深呼吸，同时将头从调试的兔子洞中拔出。
这是具有许多解决方案的问题。
问题：
Chrome认为每个范围请求都在请求“相同”资源，因为URL相同。从技术上讲，它不是“相同”资源，因为请求Content-Range标头中指定的字节范围不同。
这是chromium docs的引文，内容是http缓存如何处理具有相同URL的请求。
强制执行缓存锁定。
缓存实现单个写入器-多个读取器锁，以便 在任何情况下，只有一个网络请求同一资源 给定时间。
请注意，缓存锁的存在意味着没有带宽 浪费了同时重新获取相同资源的麻烦。在另一 手，它迫使请求等待，直到上一个请求完成 正在下载资源...
如果在我的示例中打开了每个网络请求中的“ Timing”标签，则会看到每个请求都在等待上一个请求完成。
解决方案：
强制Chrome识别范围请求正在返回不同的资源。
这可以通过在请求或响应上设置标头Cache-Control: no-cache, no-store来完成。根据要求进行设置时，性能改进最高。我仅测试了no-cache, no-store，其他标头值也可能会起作用。这就解释了为什么检查“禁用缓存”使我的请求变得如此之快，每个请求能够使用不同的TCP连接并且不会因缓存锁定而停顿。
我想为此SO question提供道具，因为给了我“哈哈！”并感谢Firefox没有出现此问题。
