服务器刷新网页缓存,HTTP 缓存之浏览器刷新行为

上一篇文章提到，HTTP Cache-Control 指令 有双向控制缓存的能力。服务器响应报文通过它控制缓存器怎么设置缓存，浏览器请求报文通过它控制本地缓存器怎么使用缓存。

本文结合 no-cache，理解一下 Chrome 浏览器刷新行为

场景描述

使用 Chrome 打开某个页面，服务端响应 Cache-Control: max-age=86400，此页面被缓存的有效期为 1 天。打开 Chrome DevTool，切换到 NetWork 选项卡。

一起来分析一下，以下两个动作分别发生什么事情。

一、勾选 Disable cache

勾选 Disable cache，刷新页面，捉包可见发起的请求报文包含 Cache-Control: no-cache。

按 HTTP 协议，no-cache 告诉缓存器，如果本地无缓存则不使用缓存。如果有缓存，将缓存资源的 ETag 和 Last-Modified 带上，发给服务器进行验证，服务器校验 ETag 和 Last-Modified，缓存资源过期则返回资源，缓存还没过期则返回 304。

但观察发现，不管缓存是否在有效期内，只要勾选 Disable cache，请求报文只有 Cache-Control: no-cache，没有 If-None-Match 和 If-Modified-Since。这种情况下，服务器无法检验资源有效性，只能响应请求资源给浏览器，不可能响应 304。因此，这种情况下 Chrome 是强制不使用本地缓存。捉包如下图所示：

二、不勾选 Disable cache，按下 F5(或 Ctrl+R)

不勾选 Disable cache，按下 F5(或 Ctrl+R) 刷新页面。请求报文包含 Cache-Control:max-age=0；其含义是不使用那些已经缓存了0秒的资源，与 no-cache 一样，它可以配合 ETag 和 Last-Modified 使用，如果本地缓存还在，且服务器返回 304 ，依然可以使用本地缓存。

可见按 F5 或 Ctrl + R，不管缓存是否在有效期内，Chrome 缓存器都不会直接使用本地缓存响应请求。只要有缓存，总是向服务器发起验证，由服务器决定是否使用本地缓存；如果本地无缓存，自然无法使用缓存。捉包如下图：