为什么Chrome会花费时间"下载"来自缓存的内容?

时间:2015-10-21 04:10:02

标签: google-chrome google-chrome-devtools http-caching

我正在提供旨在无限期地被浏览器缓存的静态内容。 Chrome正在按预期缓存它,但仍然花费时间"下载"它。我使用的是Chrome 46.0.2490.71。

Chrome Network Tab

正如您所看到的,内容是从缓存提供的,但内容下载仍需要68毫秒。这导致svg图像在每个页面加载时闪烁,即使文件已缓存。

以下是隐身模式中页面加载的相关时间线信息:

Chrome Timeline Tab

"总时间"和"活动时间"每个事件的字段为零。使用本地服务的文件(但仍然来自缓存)复制这个"接收数据"事件只见过一次。

需要注意几点:

  • 使用相同的编码从本地计算机提供相同的文件不会产生相同的下载延迟。
  • 切换到隐身模式(无扩展名)会使下载延迟减半,但不会消除它。
  • 刷新页面的速度更快,因为从服务器接收304响应所需的时间似乎比从缓存中加载响应要少。
  • 关闭开发工具似乎对延迟没有任何影响。
  • IE 11,Edge和Firefox 41没有任何延迟。

可能有什么原因?

5 个答案:

答案 0 :(得分:13)

所以这与Chrome中缓存的工作方式有关。我没有使用Chrome代码库的个人经验,但我对它的理论知之甚少。 (我还在这里找到了对Chrome缓存实施的引用,以获得更好奇:chromium disk cache

供参考,以下是我在Chrome中加载实际Stack Overflow问题的屏幕截图,其中Network面板打开,Network Throttling选项设置为" Offline"。请注意,此列表中的每个条目都来自缓存!

Imgur screencap

您还会注意到Chrome 花费时间"正在下载"每个文件。为什么是这样?好吧,Chrome的缓存是一个数据库,该数据库也被压缩以节省空间。从缓存中检索文档时,检索的价格不为零。 Chrome必须在缓存数据库中查找该项目,然后将该条目扩展到内存中,以便Chrome可以使用它。我不知道有关网络chrome-dev-tools面板如何显示时间的具体细节,但我猜想从磁盘获取该文件,解压缩它,然后解析并使用结果就是你&# 39;重新看到反映在"下载的时间。"

我无法评论为什么其他浏览器也没有这种延迟,因为我没有很多经验。可能是他们要么使用更有效的方法从缓存中获取内容(可能),要么可能是他们始终将缓存保留在内存中(不太可能),或者他们正在跳过某些完整性检查Chrome正在制作缓存数据(可能)

答案 1 :(得分:2)

我遇到了同样的问题。我实现了PDF下载功能。在点击下载链接时,我得到了大约260毫秒的响应,但是在Chrome上10秒后开始下载。

FIX: - 我分析说我的Windows系统是64位,Chrome是32位。将chrome升级到64位后,此问题已得到解决。 我在https://bugs.chromium.org/p/chromium/issues/detail?id=103737

找到了解决方案

答案 2 :(得分:0)

当我传递标题(" Content-Length:xxx")时,加载速度提高100%!

答案 3 :(得分:0)

我有同样的问题,从缓存下载花了一个永恒。 问题是我的文件的gzip大小为410 KB(已经很大了) 解压缩它的大小为1.5 GB,因此浏览器花了很多时间从缓存中加载它然后解压缩它。

使用最新的chrome dev工具,您还可以看到解压缩的大小: With the lastest chrome dev tools you see the unzipped size as well

答案 4 :(得分:0)

我遇到了类似的“问题”。但是,一旦我在关闭了DevTools的隐身窗口中加载了页面(具有“从磁盘缓存中缓慢检索”的依赖项)后,意外的延迟就消失了。在我看来,这可能是由于Chrome扩展程序或DevTools窗口的干扰引起的。