浏览器缓存的起点 -> Cache-Control

·  阅读 1843
浏览器缓存的起点 -> Cache-Control

浏览器缓存的起点 -> Cache-Control

先介绍一个关键字段 Cache-Control ,位与响应头,告诉浏览器 该资源 应当如何缓存

image.png

Cache-Control 的几种常见的配置

  1. max-age:设置强制缓存的时间,单位s。资源会缓存到本地
  2. no-cache:设置不强制缓存,每次都去进行协商缓存,确定资源是否有变更,一般用在index.html。 资源会缓存到本地
  3. no-store:不进行强制缓存和协商缓存,直接拉取最新的资源。资源不缓存到本地。
  4. private:如果有这个字段 比如:Cache-Control: private, max-age=360000,意思:中间层(代理)或者说CDN 不缓存此资源,使CDN失效,每次只能访问源服务器
  5. public:CDN可以缓存

介绍几个真实场景

Cache-Control: max-age=315360000
使用场景:CDN(一般永远不变)
效果:缓存10年
复制代码
Cache-Control: max-age=31536000
使用场景:比如图片资源(几乎不变)
效果:缓存1年
复制代码
Cache-Control: max-age=2592000
使用场景:比如js,css资源(按月迭代,较少频率改变)
效果:缓存1月
复制代码
Cache-Control: no-cache
使用场景:webpack工程的 SPA单页面的入口 index.html(可能频繁改变)
效果:每次都要发起协商缓存,去询问资源是否变更,无变更则304重定向
复制代码

* 如果服务端没有设置 Cache-Control 怎么办 (同时没有Expires)?

理论上是前端定好缓存策略(我的另一篇juejin.cn/post/694315… )后,需要给到运维,运维按前端的要求去配置。

如果没有配置,浏览器是不是就不会缓存了?

答:否,浏览器有自己的优化策略(毕竟要让自己家的浏览器使用起来更快! 强制给你弄缓存)

启发式缓存

没有设置 Cache-Control,Expires。chorme浏览器具体策略:

第一次:协商缓存,询问服务端,资源是否改变,已改变则发起请求。没改变的话,304重定向,并根据响应头的date和last-modified计算出强制缓存的时间(类似强制设置 Cache-Control: max-age=xx)

  • xx 的值是: (date 减去 last-modified )乘以 10%
    • date是创建HTTP报文的日期和时间(就是当前访问这个资源的时间)

第二次开始:就有强制缓存了,状态码为200

缓存的位置

memory cache 和 disk cache 

  • memory cache 是从浏览器的内存空间(RAM)中存取缓存信息,因此读写速度更快,但生命周期更短;

  • disk cache 就是从磁盘中存取,读写速度较慢,属于持久化的缓存。

Chrome 究竟会在什么情况下使用 memory cache,什么情况下使用 disk cache 呢?

  • 我们可以打开一个新的tab页面,打开 "Network",刷新一下,看到缓存的 .js 都是 "from memory"(.css 不会走 memory cache,都是 "from disk")。

  • 现在我们关闭当前tab(或关闭浏览器),重新再打开之前的 tab 时,缓存的 .js 都是 "from disk" 了。

    • 因为当 .js 等资源被加载时,浏览器会先将其放入 memory cache 中,而当此页面tab被关闭时,浏览器会将此页面的 memory cache 中的缓存文件转存到 disk cache 中持久化存储。

另外提一下 Expires

Cache-Control (http 1.1) > Expires(http 1.0)

  1. 同时存在时,Cache-Control 优先级高
  2. Expires:Thu,15 Apr 2010 20:00:00 GMT 效果类似= Cache-Control: max-age=xxx

码字不易,点赞鼓励


性能优化合集快速入口:

分类:
前端
收藏成功!
已添加到「」, 点击更改