Chrome中的正常重新加载不使用缓存

Question

我有一个问题，即在Google Chrome中正常重新加载从服务器获取所有javascript文件，而不是从浏览器缓存中提取它们。奇怪的是，如果我通过将光标放在地址栏中并按 Enter 直接加载网站，则会使用浏览器缓存（如预期的那样）。我的＆＃34;禁用缓存＆＃34;开发工具中的复选框是未选中，因此不能这样。

让我们通过加载包含jQuery hosted library的简单HTML页面来查看此行为的快速示例。

从地址栏

当我从地址栏输入网页并点击 Enter 时，我可以在开发工具中看到jQuery从浏览器缓存加载。

正常重新加载

如果我选择进行＆＃34;正常重新加载＆＃34;右键单击“刷新”按钮并打开开发工具或点击 F5 ，然后缓存不将被使用。这是问题所在。 您可以清楚地看到它返回状态304并且根据this question它应该在该实例中使用该文件的本地版本。但它显然要求新版本。事实上，它似乎与...的工作方式几乎相同。

清空缓存和硬重新载入

我只是想将响应与硬重载和清除缓存进行比较。在返回200而不是304之外，它似乎与正常重新加载相同。实际上，由于某种原因，此请求更快。

任何人都可以解释为什么正常的重新加载与从地址栏访问页面不同并且不使用缓存？我使用的是Chrome版本53.0.2785.143。

Answer 1

您的屏幕截图展示了两件重要的事情：

• 304仅发生 119字节的网络传输。文件本身正在从缓存中正确加载。 HTTP请求的延迟时间仍然存在，但是在连接速度很慢的情况下（AOL拨号或EDGE移动设备上仍有人，请记住）119字节和33,000字节之间的差异将变得更加重要。
• 您的200请求确实比您的304请求更快，但这是一次性的。随后的尝试可能会反过来。您需要对数十个（如果不是数百个/数千个）请求进行适当的基准测试，以确保这些数字保持不变（因为它们很容易与网络状况相关，在Google上遇到速度慢的CDN服务器等）

至于Enter和F5 / Reload之间的区别，请参阅What's the difference between "Normal Reload", "Hard Reload", and "Empty Cache and Hard Reload" in chrome?。 TL; DR版本：确实使用了缓存（因此传输了很小的字节），但是通过获取304的请求，服务器重新验证了它。

Answer 2

我在使用javascript location.reload（）研究相同效果时遇到了这篇文章。相反，我所做的是

location.href = location.href; 

需要重新加载的资源实际上已经重新加载，因为它是PHP生成的，具有以下内容（从另一个stackoverflow问题复制）：

header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pargma: no-cache"); // HTTP 1.0
header("Expires: 0 "); // Proxies

Answer 3

您是否在该页面上使用任何外部脚本？

像Gravatar或类似的东西......

根据这里的回答：https://superuser.com/questions/89809/how-to-force-refresh-without-cache-in-google-chrome

它可能来自第三方脚本发送的标题，您的浏览器会将其解释为旧的等等......有太多可能的解释。

在我的情况下Gravatar是问题（发送旧标题）。希望这也会对你有所帮助。