检查网络响应是来自服务器还是来自 Chrome 缓存

Posted 2023-02-15

【中文标题】检查网络响应是来自服务器还是来自 Chrome 缓存

【英文标题】：Check whether network response is coming from server or Chrome cache

【发布时间】：2012-10-19 20:53:50

【问题描述】：

在 Google Chrome 中，如何检查哪些文件来自浏览器缓存，哪些来自服务器？

【问题讨论】：

James 的回答，来自 chrome 检查器，非常棒。我会注意一些进一步的信息。当您打开 chrome 的检查器并转到网络选项卡时，相关表格仅在您刷新页面时显示.. 如果它说 status-200, size-___B 然后它直接加载页面。否则它没有。如果它说 status-304, size-___B 那么它发出了请求，但从缓存中加载了它。如果它显示状态-200，大小-（内存缓存），那么它从缓存中加载它并且没有发出请求

实际上，根据this response：状态为 304 的请求已发出并重新获取标头，但文件的内容是从缓存中加载的。如果在给定时间（由 Cache-Control 标头定义）后修改了文件的内容，则再次下载整个文件。

【参考方案1】：

如果您看不到尺寸栏，那么您可能需要关闭此窗口

大小列会告诉您响应是来自缓存还是来自网络。

【参考方案2】：

在 Chrome 开发者工具中切换到网络选项卡并在大小列上，它会为您提供下载内容的大小或说 （来自磁盘/内存缓存）。

【讨论】：

我的总是显示时间，我已经使用 gulp 缩小了文件，每次刷新文件时都从服务器请求。我让浏览器缓存文件？之前我认为这是一个默认功能。

@KillABug 浏览器缓存通常是默认功能。您是否对文件名进行哈希处理、时间戳记或版本化？

不，我打算这样做，但目前每次浏览器刷新都会对所有静态文件进行新调用。我想我需要更新“最大年龄”的标题并结合版本控制来使缓存为我工作。先生，您的意见。

确保取消选中“禁用缓存”...因为您可能已经检查了它:)

在实现ETag system 时，由于检索标头的连接，总会有大小。当我怀疑强制谷歌禁用缓存时，加载它并查看大小（并写下来）。然后重新启用缓存，大小要小得多，通常是几百字节，缓存是工作的。