【没有实践系列】浏览器的强缓存和协商缓存

一、前言

先记录从其他文章得到经验，看看以后有没机会用上

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

后端设置，全部都是在响应头，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缓存，就会跳过强缓存和协商缓存吗？