写在前面的话

浏览器缓存是常考题，总忘；

其实，都是借口，就是没走心；

1、浏览器缓存分为强缓存和协商缓存

按浏览器读取优先级顺序依次为：Memory Cache、Service Worker Cache、HTTP Cache、Push Cache

1）强缓存

直接从本地副本比对读取，不去请求服务器，返回的状态码是 200；

强缓存主要包括 expires 和 cache-control

HTTP1.0中定义expires为资源的过期时间；

HTTP1.1中定义了cache-control 表示相对时间（解决了expires中服务器时间和本地时间可能不一致的问题）；（优先级高于expires）

2）协商缓存

会去服务器比对，若没改变才直接读取本地缓存，返回的状态码是 304

last-modified 记录资源最后修改的时间（记录的是编辑时间，无论是否修改；只能记录到秒）

etag 会基于资源的内容编码生成一串唯一的标识字符串，只要内容不同，就会生成不同的 etag。（优先级更高）

2、缓存命中率

从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。

3、过期内容

超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。

4、验证

验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。

5、失效

失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。

6、按刷新按钮、F5 刷新、网页右键“重新加载”

这种情况下，实际是浏览器将 cache-control 的 max-age 直接设置成了 0，让缓存立即过期，直接走协商缓存路线。发送的请求头如下：

cache-control: max-age=0

if-modified-since: Tue, 20 Nov 2018 00:41:14 GMT

7、ctrl + F5 强制刷新

强制刷新的情况下，浏览器会强行设置 no-cache，强制获取最新的资源，就连 if-modified-since 等其他缓存协议字段都会被吃掉。此时发送的请求头如下：

cache-control: no-cache

pragma: no-cache

参考链接

https://www.cnblogs.com/ranyonsue/p/8918908.html

https://www.jianshu.com/p/fb59c770160c

以上