Eri*_*uan 9 javascript google-chrome http browser-cache cors
我的应用在这里加载视频:https://core.arc.io/guanzo/VideoOfPeopleWalking.mp4
它使用Range请求标头以16Kb的块加载来自另一个来源的视频.我的服务器已将响应标头设置Access-Control-Max-Age
为10分钟,以防止出现多余的OPTIONS请求.
访问链接(它是一个HTML页面),打开网络工具,并观察获取16Kb块需要大约1秒.
现在选中"禁用缓存",您应该看到请求更快完成LOT,看起来有更多的并发请求.这与预期行为相反,因为每个请求都必须触发并等待OPTIONS请求.
如果启用了缓存,请求应该更快,不是吗？这里发生了什么？
以下是GIF格式的复制品:https://i.gyazo.com/ec5941829031cdd4dc684a3b53ec6c39.mp4
注意:块存储在IndexedDB中,因此如果刷新页面,则需要清除IndexedDB以强制触发所有请求.
编辑:筛选出任何firestore请求,我不确定为什么这些请求被解雇,但它应该与我的问题无关.
编辑:一个新的线索!https://i.gyazo.com/bd887533a42868f748564ccda4451881.png
选中"禁用缓存"后,Chrome将重复使用"连接ID"列中显示的相同TCP连接.表面上看,这应该可以更快地提出请求.
深呼吸,同时把头伸出调试兔子洞.
这是一个有很多解决方案的问题.
问题:
Chrome认为每个范围请求都请求"相同"资源,因为URL相同.它在技术上不是"相同"资源,因为在Content-Range头部中指定了不同的字节范围.
以下是关于http缓存如何处理具有相同URL的请求的chrome文档的引用.
强制执行缓存锁定.
缓存实现单个写入器 - 多个读取器锁定,以便在任何给定时间只有一个网络请求同一资源在飞行中.
请注意,缓存锁定的存在意味着没有浪费带宽同时重新获取相同的资源.另一方面,它强制请求等待上一个请求完成下载资源...
如果您在我的示例中打开了每个网络请求中的"Timing"选项卡,您会看到每个请求都在等待上一个请求完成.
解决方案:
强制Chrome识别范围请求返回不同的资源.
这可以通过Cache-Control: no-cache, no-store在请求或响应上设置标头来完成.在请求中设置时,性能提升最高.其他标题值可能会起作用,我只测试过no-cache, no-store.这解释了为什么检查"禁用缓存"使我的请求更快,每个请求都能够使用不同的TCP连接,并且没有被缓存锁定停顿.
我想为这个问题提供道具给我"阿哈!" 那一刻,并没有这个问题的Firefox.
