Cache-Control 请求头与浏览器强制刷新

840次阅读  |  发布于2年以前

Cache-Control 作为「响应头」,用以控制缓存策略,这也是前端 HTTP 缓存策略的基础。

但是你知道 Cache-Control 也可以作为「请求头」吗,以及它作为请求头有何作用?

以最常见的 no-cachemax-age=0 为例,「二者均会重新向服务器发起请求,哪怕该请求已被强缓存」。

可参考 MDN cache-control directives

no-cache/max-age=0 及测试

为了进行验证,我们打开掘金的官网,在网络中找到「任意一条强缓存」的资源,进行测试。

Q:怎么验证某条资源为强缓存资源?见下图

缓存策略通过服务器进行配置,但是「缓存资源在 HTTP 客户端进行实现」,而 Apifox 等进行 HTTP 管理的 HTTP 客户端未实现缓存,因此在浏览器中使用控制台的网络面板进行测试。

为了方便以及避免跨域问题,我们直接在浏览器控制面板将请求 Copy as fetch 并在新标签页面打开该资源,随后打开浏览器控制台网络面板。

通过使用 fetch 发送请求,并通过 headers 控制请求头 cache-control,在控制台中进行测试,并在网络面板检测网络状况。

我们分别将测试以下三种情况:

  1. 请求头配置 Cache-Control: max-age=0
  2. 请求头配置 Cache-Control: no-cache
  3. 请求头不配置 Cache-Control 指令
fetch('https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/01552cc.js')

fetch('https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/01552cc.js', {
  headers: { 'cache-control': 'max-age=0' }
})

fetch('https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/01552cc.js', {
  headers: { 'cache-control': 'no-cache' }
}

以下是三次测试结果,其中不发请求头为本地缓存,max-age=0 为 304,no-cache 为 200。

浏览器中关于缓存的控制

  1. <Ctrl-R>:正常重新加载。实际上的实现是每次发送请求携带 Cache-Control: max-age=0 头部。
  2. <Shift-Ctrl-R>:硬性重新加载。实际上的实现是每次发送请求携带 Cache-Control: no-cache 头部。

作业

  1. cache-control: no-cache 作为请求头以及响应头时分别是什么意思
  2. cache-control: no-cachecache-control: max-age=0 作为请求头有何区别
  3. 在浏览器控制台分别携带 cache-control 两种请求头发送请求,对比区别
  4. 浏览器中的正常重新加载与硬性重新加载,观察控制台中 cache-control 请求头

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8