索鸟网

  1. 首页
  2. HTTP 缓存之浏览器刷新行为

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

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

http

来源地址:https://segmentfault.com/a/1190000010787023 版权归作者所有!