http 得到 304 但仍然下载内容

Question

我请求了一个 html 文件，我得到了 http 状态码 304。我知道这意味着内容没有被修改。所以浏览器可以使用缓存。但我注意到在请求时间信息内容下载中使用了 2.63s。

我使用 Chrome 开发工具进行了调试。

既然浏览器有缓存，为什么还要下载内容？

Answer 1

检查缓存的新鲜和陈旧状态之间的区别。

第 1 阶段：第一次请求。向服务器发出请求并获得资源。每个资源都是新鲜获取的

在我的例子中，我的 js 文件的标头是 cache-control:public, max-age=3，这意味着缓存在 3 秒内从新鲜变为陈旧（证明差异所需的时间要少得多）

状态 2： 再次请求（Ctrl+Refresh）。现在，由于我的缓存是陈旧的，它向服务器发送请求，告诉服务器没有修改资源。因此，这些资源并未完全获取。仅获取标题。仔细注意在每种情况下传输的字节（每个约 220 字节）仅用于这些资源的标头。因此 304(Not Modified) 节省了很多 kbs，不再传输正文。 我的资源的新鲜度是陈旧的，这就是它向服务器发送请求的原因

当您检查正文时，第 2 次的响应与第 1 次相同，但正文是从陈旧的缓存中获取的，并且资源缓存再次标记为 FRESH 3 秒。

注意，在我的情况下，我可以通过将缓存 max-age 设置为 1 年（有些高）来进行优化，因为我对每个文件都使用了 chunkhash，这会告诉浏览器不要向服务器发出请求并直接获取从缓存给出响应 200 (from cache)，您可以在 Stage2 中看到分析文件，其标题为 cache-control:public, max-age=7200

Answer 2

Chrome 正在发出请求以询问服务器是否应使用缓存。 服务器响应“HTTP/1.1 304 Not Modified”和一些额外信息。 你可以阅读更多关于这个in here的信息。

总响应大小通常小于 1KB，因此 2.63 以毫秒或该请求的总时间为单位。 您可以阅读更多关于资源网络计时的信息in here。

更新：

正如阿里正确指出的那样，内容下载将用于缓存检索。根据文件大小和系统配置，这可能需要一段时间。

关于缓存here的更详细解释。

Chrome 扩展程序也可能会变慢 - 更多 here。