一、前言

先记录从其余文章失去教训，看看当前有没机会用上

二、缓存是前端还是后端设置？

后端设置，全部都是在响应头，response header这个外面设置属性

三、类型

1.强缓存

设置cahe-control，比方像这样

Cache-Control 的几个取值含意：

private： 仅浏览器能够缓存

public： 浏览器和代理服务器都能够缓存（对于private和public，前端能够认为一样，不必深究）

max-age=xxx 过期工夫（重要）

no-cache 不进行强缓存（重要）

no-store 不强缓存，也不协商缓存（下一个介绍的类型），根本不必，缓存越多才越好呢

规定能够设置多个，像
cahe-controlmaxage=31536000,public,immutable

（上面流程独自指强缓存，实际上是先强缓存后协商缓存的流程，要留神）

  1. 用户申请一张图片
  2. 浏览器查找缓存表，
  • 没有，申请服务器，服务器返回资源（状态码200），把它存到缓存表

  • 有，再读max-age有没有过期

    • 没有过期，拿缓存返回（状态码200）
    • 过期了，申请服务器，服务器返回资源（状态码200），把它存到缓存表

尽管在network看起来如同都是申请了接口，然而要留神其实有下面判断的，能够看这里

看到前面那段话没，来自内存缓存。

2.协商缓存

当强缓存生效，（设置了no-cache或者max-age过期了）就会走这个

设置两个属性ETag，Last-Modified

ETag：每个文件有一个，改变文件了就变了，能够看似md5
Last-Modified：文件的批改工夫

（上面流程独自指协商缓存，实际上是先强缓存后协商缓存的流程，要留神）

  1. 第一次申请资源，在response header都会有下面两个属性返回，浏览器会把这些存到缓存
  2. 下次申请同一个资源时，在request header会把这两个值带过来，并且ETag这个key会换了一个名字If-None-Match

  1. 服务端承受申请，比照这两个值
  • 没有过期，状态码304，间接拿缓存的
  • 过期了，服务器返回新资源（状态码200），当然也有新的etag和last-modified，浏览器缓存表更新

这里留神，协商缓存无论是不是命中，都申请了接口，这个搞清楚，只是命中了，响应很快，没命中，就是失常的响应速度

四、残缺流程

缓存命中是先走强缓存再走协商缓存的,看图

五、其余补充

用户操作对缓存影响

对于cdn
集体了解，cdn只是代替了你的原始服务器，长处就是它的响应更快，而后强缓存和协商缓存还是仍旧有执行判断的。

非常感谢以下大佬
浏览器缓存
用了CDN缓存，就会跳过强缓存和协商缓存吗？