上一篇文章提到,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 缓存器都不会直接使用本地缓存响应请求。只要有缓存,总是向服务器发起验证,由服务器决定是否使用本地缓存;如果本地无缓存,自然无法使用缓存。捉包如下图:

相关文章
HTTP 缓存的关键路径
HTTP 缓存的相关协议

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的文章

载入中...
啃先生 啃先生

1.2k 声望

发布于专栏

啃先生

前腾讯前端开发工程师,后来有一年时间经历参与创业,目前在券商。坚持原创,分享前端开发经验,创业故事,互联网行业思考。 @深圳

73 人关注

系列文章