为什么 Chrome 会花时间从缓存中“下载”内容？答案

【问题标题】：Why does Chrome spend time "downloading" content from cache?为什么 Chrome 会花时间从缓存中“下载”内容？
【发布时间】：2016-01-19 22:44:58
【问题描述】：

我正在提供旨在由浏览器无限期缓存的静态内容。 Chrome 正在按预期缓存它，但仍在花时间“下载”它。我正在使用 Chrome 46.0.2490.71。

如您所见，内容正在从缓存中提供，但内容下载仍需要 68 毫秒。这会导致 svg 图像在每次页面加载时闪现，即使文件已被缓存。

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

每个事件的“总时间”和“事件时间”字段为零。使用本地提供的文件（但仍来自缓存）复制此“接收数据”事件只会看到一次。

需要注意的几个有趣的点：

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

可能有哪些原因？

【问题讨论】：

你加载了哪些扩展？大多数扩展程序在隐身模式下不起作用...
这可能是由您安装的扩展程序引起的。很多时候他们会导致像这样的奇怪错误，因为他们可以访问代码/浏览器中的许多东西......我从来没有遇到过这个，我一直使用 devtools 来衡量我的网站的性能，所以我不认为这是一个铬错误。只需尝试禁用它们，然后它们一一允许它们。
老实说，我不认为 67ms 从磁盘加载 142kb 是不现实的。

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

【解决方案1】：

所以这与缓存在 Chrome 中的工作方式有关。我对 Chrome 的代码库没有个人经验，但我确实了解它的理论。（为了更好奇，我还在这里找到了对 Chrome 缓存实现的参考：chromium disk cache）

作为参考，这是我在 Chrome 中加载您的实际 Stack Overflow 问题的屏幕截图，其中网络面板打开并且网络限制选项设置为“离线”。请注意，此列表中的每个条目都是从缓存中获取的！

您还会注意到 Chrome 花费时间“下载”每个文件。为什么是这样？好吧，Chrome 的缓存是一个数据库，并且该数据库也被压缩以节省空间。当您从缓存中检索文档时，该检索的价格不为零。 Chrome 必须在缓存数据库中查找该项目，然后将该条目膨胀到内存中，以便 Chrome 可以使用它。我不知道有关 Network chrome-dev-tools 面板如何显示时间的确切细节，但我猜想从磁盘获取该文件，解压缩，然后解析和处理结果就是你所看到的反映在“下载时间”中。

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

【讨论】：

有没有办法优先考虑进入内存和缓存中磁盘的内容？

【解决方案2】：

当我传递 header("Content-Length: xxx") 时，它的加载速度快了 100%！

【讨论】：

【解决方案3】：

我遇到了同样的问题，从缓存下载需要很长时间。问题是我的文件的 gzip 大小为 410 KB（已经很大）解压后它的大小为 1.5 MB，因此浏览器花费了很多时间从缓存中加载它然后解压。

使用最新的 chrome 开发工具，您还可以看到解压缩后的大小：

【讨论】：

【解决方案4】：

我遇到了同样的问题。我实现了 PDF 下载功能。在点击下载链接时，我在 260 毫秒左右得到响应，但在 chrome 上 10 秒后开始下载。

FIX:- 我分析我的windows系统是64位的，chrome是32位的。将 chrome 升级到 64 位后，此问题已解决。我在https://bugs.chromium.org/p/chromium/issues/detail?id=103737找到了分辨率

【讨论】：

【解决方案5】：

我遇到了类似的“问题”。但是，一旦我在关闭 DevTools 的隐身窗口中加载我的页面（及其“从磁盘缓存中检索缓慢”依赖项），意外的延迟就消失了。这向我表明，问题是由于来自 Chrome 扩展程序或 DevTools 窗口的干扰。

【讨论】：