一、前言
先记录从其余文章失去教训,看看当前有没机会用上
二、缓存是前端还是后端设置?
后端设置,全部都是在响应头,response header 这个外面设置属性
三、类型
1. 强缓存
设置cahe-control,比方像这样
Cache-Control 的几个取值含意:
private: 仅浏览器能够缓存
public: 浏览器和代理服务器都能够缓存(对于 private 和 public,前端能够认为一样,不必深究)
max-age=xxx 过期工夫(重要)
no-cache 不进行强缓存(重要)
no-store 不强缓存,也不协商缓存(下一个介绍的类型),根本不必,缓存越多才越好呢
规定能够设置多个,像
cahe-controlmaxage=31536000,public,immutable
(上面流程独自指强缓存,实际上是先强缓存后协商缓存的流程,要留神)
- 用户申请一张图片
- 浏览器查找缓存表,
- 没有,申请服务器,服务器返回资源(状态码 200),把它存到缓存表
-
有,再读 max-age 有没有过期
- 没有过期,拿缓存返回(状态码 200)
- 过期了,申请服务器,服务器返回资源(状态码 200),把它存到缓存表
尽管在 network 看起来如同都是申请了接口,然而要留神其实有下面判断的,能够看这里
看到前面那段话没,来自内存缓存。
2. 协商缓存
当强缓存生效,(设置了 no-cache 或者 max-age 过期了)就会走这个
设置两个属性ETag,Last-Modified
ETag:每个文件有一个,改变文件了就变了,能够看似 md5
Last-Modified:文件的批改工夫
(上面流程独自指协商缓存,实际上是先强缓存后协商缓存的流程,要留神)
- 第一次申请 资源,在 response header 都会有下面两个属性返回,浏览器会把这些存到缓存
- 下次申请同一个资源时 ,在request header 会把这两个值带过来,并且 ETag 这个 key 会换了一个名字 If-None-Match
- 服务端承受申请,比照这两个值
- 没有过期,状态码 304,间接拿缓存的
- 过期了,服务器返回新资源(状态码 200),当然也有新的 etag 和 last-modified,浏览器缓存表更新
这里留神,协商缓存无论是不是命中,都申请了接口,这个搞清楚,只是命中了,响应很快,没命中,就是失常的响应速度
四、残缺流程
缓存命中是 先走强缓存 再走协商缓存 的, 看图
五、其余补充
用户操作对缓存影响
对于 cdn
集体了解,cdn 只是代替了你的原始服务器,长处就是它的响应更快,而后强缓存和协商缓存还是仍旧有执行判断的。
非常感谢以下大佬
浏览器缓存
用了 CDN 缓存,就会跳过强缓存和协商缓存吗?