Chrome 中的正常重新加载不使用缓存
Normal reload in Chrome does not use cache
我遇到一个问题,在 Google Chrome 中进行正常重新加载会从服务器获取我所有的 javascript 文件,而不是从浏览器缓存中提取它们。奇怪的是,如果我通过将光标放在地址栏中并按 Enter 直接加载站点,则会使用浏览器缓存(如预期的那样)。我在开发工具中的 "Disable cache" 复选框是 未选中 所以不可能是那样。
让我们通过加载包含 jQuery hosted library.
的简单 HTML 页面来快速查看此行为的示例
来自地址栏
当我从地址栏输入网页并按 Enter 时,我可以在开发工具中看到 jQuery 正在从浏览器缓存中加载。
正常装填
如果我 select 通过在开发工具打开的情况下右键单击“刷新”按钮或按 F5 来执行 "Normal Reload",则缓存会 不习惯了。这就是问题所在。
您可以清楚地看到它返回了 304
的状态,并且根据 this question 它应该在该实例中使用文件的本地版本。但它显然要求一个新版本。事实上,它的工作原理似乎与...
清空缓存并硬重新加载
我只是想比较硬重载和清除缓存的响应。除了返回 200
而不是 304
之外,它似乎与正常的重新加载相同。事实上,出于某种原因,此请求更快。
谁能解释一下为什么正常的reload和从地址栏访问页面不一样,不使用缓存?我正在使用 Chrome 版本 53.0.2785.143.
您的屏幕截图展示了两件重要的事情:
- 304 仅引起 119 字节 的网络传输。文件本身正在从缓存中正确加载。 HTTP 请求仍然存在延迟,但在连接速度较慢的情况下(请记住,仍然有人使用 AOL 拨号或 EDGE 手机),119 字节和 33,000 字节之间的差异将变得更加显着。
- 您的 200 请求确实比 304 请求快,但这是一次性的。随后的尝试可能会扭转这种局面。您需要对数十个(如果不是 hundreds/thousands)请求进行适当的基准测试,以确保这些数字能够保持不变(因为它们很容易与网络状况相关,在 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 的请求与服务器重新验证。
您是否在该页面上使用了任何外部脚本?
喜欢 Gravatar 或类似的东西...
根据这里的回答:https://superuser.com/questions/89809/how-to-force-refresh-without-cache-in-google-chrome
它可能来自 headers 由第三方脚本发送,您的浏览器将其解释为旧脚本等等...有很多可能的解释。
在我的例子中,Gravatar 是问题所在(旧 headers 已发送)。希望这也会对您有所帮助。
我在使用 javascript location.reload() 研究相同效果时偶然发现了这个 post。我做的是
location.href = location.href;
需要重新加载的资源实际上确实重新加载了,因为它是一个 PHP 生成的资源,具有以下内容(从另一个 Whosebug 问题复制而来):
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pargma: no-cache"); // HTTP 1.0
header("Expires: 0 "); // Proxies
我遇到一个问题,在 Google Chrome 中进行正常重新加载会从服务器获取我所有的 javascript 文件,而不是从浏览器缓存中提取它们。奇怪的是,如果我通过将光标放在地址栏中并按 Enter 直接加载站点,则会使用浏览器缓存(如预期的那样)。我在开发工具中的 "Disable cache" 复选框是 未选中 所以不可能是那样。
让我们通过加载包含 jQuery hosted library.
的简单 HTML 页面来快速查看此行为的示例来自地址栏
当我从地址栏输入网页并按 Enter 时,我可以在开发工具中看到 jQuery 正在从浏览器缓存中加载。
正常装填
如果我 select 通过在开发工具打开的情况下右键单击“刷新”按钮或按 F5 来执行 "Normal Reload",则缓存会 不习惯了。这就是问题所在。
304
的状态,并且根据 this question 它应该在该实例中使用文件的本地版本。但它显然要求一个新版本。事实上,它的工作原理似乎与...
清空缓存并硬重新加载
我只是想比较硬重载和清除缓存的响应。除了返回 200
而不是 304
之外,它似乎与正常的重新加载相同。事实上,出于某种原因,此请求更快。
谁能解释一下为什么正常的reload和从地址栏访问页面不一样,不使用缓存?我正在使用 Chrome 版本 53.0.2785.143.
您的屏幕截图展示了两件重要的事情:
- 304 仅引起 119 字节 的网络传输。文件本身正在从缓存中正确加载。 HTTP 请求仍然存在延迟,但在连接速度较慢的情况下(请记住,仍然有人使用 AOL 拨号或 EDGE 手机),119 字节和 33,000 字节之间的差异将变得更加显着。
- 您的 200 请求确实比 304 请求快,但这是一次性的。随后的尝试可能会扭转这种局面。您需要对数十个(如果不是 hundreds/thousands)请求进行适当的基准测试,以确保这些数字能够保持不变(因为它们很容易与网络状况相关,在 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 的请求与服务器重新验证。
您是否在该页面上使用了任何外部脚本?
喜欢 Gravatar 或类似的东西...
根据这里的回答:https://superuser.com/questions/89809/how-to-force-refresh-without-cache-in-google-chrome
它可能来自 headers 由第三方脚本发送,您的浏览器将其解释为旧脚本等等...有很多可能的解释。
在我的例子中,Gravatar 是问题所在(旧 headers 已发送)。希望这也会对您有所帮助。
我在使用 javascript location.reload() 研究相同效果时偶然发现了这个 post。我做的是
location.href = location.href;
需要重新加载的资源实际上确实重新加载了,因为它是一个 PHP 生成的资源,具有以下内容(从另一个 Whosebug 问题复制而来):
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pargma: no-cache"); // HTTP 1.0
header("Expires: 0 "); // Proxies