共计 2099 个字符，预计需要花费 6 分钟才能阅读完成。
浏览器缓存作用
加快页面打开速度
减轻服务器压力
减少网络损耗
浏览器缓存有两种方式：
1、mate 标签
2、header 头
mate 标签控制 1、content-type(文档内容类型：用于设定文档的类型和字符集)2、expires(期限：可以用于设定网页的到期期限)3、pragma（cashe 模式：即是否从缓存中访问网页内容）4、refresh(刷新：等待一定时间自动刷新或跳转到其他 url)
// 文档类型
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
// 必须是 GMT 格式
<meta http-equiv=”expires” content=”Fri,12 Jan 2001 15:15:15 GMT”>
// 是否设置缓存
<meta http-equiv=”pragma” content=”no-cache”>
// 等待一定时间自动跳转
<meta http-equiv=”refresh” content=”1; url=https://www.baidu.com”/>
* 说了这么多 mate 兼容性不靠谱！所以说基本没用
接下来说点有用的，浏览器会通过 Response header 信息，来确认是否缓存，怎么缓存。
头信息缓存机制有分两种
强缓存
协商缓存
先说强缓存：
在控制台资源加载 size 栏我们会看到架子啊资源的大小，如果是缓存直接在本地读取（from memory cache 来自内存缓存）（from disk cache 来自磁盘缓存）
浏览器加载资源时先判断头信息是否包含 Cache-Control 和 Expires 这两个属性，Expires 是 http1.0，Cache-Control 是 http1.1, 从版本上来说肯定是 Cache-control 更强一些，毕竟不能越升级越 low，约定也是两个同时存在 Cache-control 优先级更高。
截图为 js 的 Response header 信息，包含 Cache-control 和 Expires，但从字面上我们能看出 Expires 设置了一个时间，我们猜它应该是过期时间，擦居然猜对了。我们再猜一下 Cache-control：一坨字段，max-age=31536000，我猜也是过期时间，哈哈又猜对了，不逗比了挨个说说
Expires：设置浏览器缓存时间，时间是绝对时间，从设置的值上可以看出是个日期，浏览器收到 Response 时看看有没有 Expires 字段有的话缓存头信息和资源，再次请求时查看缓存时间过没过，没过在缓存拿出来，过了重新请求。
Cache-control：这个承载值就多了
max-age=xxx：缓存的内容将在 xxx 秒后失效，这个时间是个时间间隔相对时间。public：所有内容都将被缓存（客户端和代理服务器都可缓存）private：内容只缓存到私有缓存中（仅客户端可以缓存，代理服务器不可缓存）no-cache：必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌（ETag），no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载 no-store：所有内容都不会被缓存或 Internet 临时文件中 must-revalidation/proxy-revalidation：如果缓存的内容失效，请求必须发送到服务器 / 代理以进行重新验证
服务端如何判断缓存已失效？
服务端通过 If-Modified-Since（Last-Modified）和 If-None-Match（Etag）这两个属性的值来判断缓存是否失效的。
2、协商缓存：当浏览器判断不是强缓存，就会发向服务器发请求，判断是否是协商缓存。如果是，服务器会返回 304Not Modified，浏览器从缓存中加载。那什么又是协商缓存呢？
Last-Modified 和 If-Modified-Since 字段：
1、浏览器第一次向服务器发请求，服务器返回资源并在 response header 加上 Last-Modified 字段，表示资源最后修改的时间。2、浏览器再次请求这个资源时，请求头会加上 If-Modified-Since 字段。若这两个字段一样，说明资源没有修改过，返回 304Not Modified，浏览器从缓存中获取资源。若这两个字段不一样，说明资源修改过，服务器正常返回资源。
ETag、If-None-Match：
但有时候服务器上资源有变化，单最后修改时间没更新，则引出下面两个字段。1、浏览器第一次向服务器请求，服务器返回资源并在 response header 上加 ETag 字段。表示资源本身，资源有变化，则该字段有变化。2、浏览器再次向服务器请求这个资源时，请求头携带 If-None-Match 字段。若这两个字段相同，则代表资源没有变化，服务器返回 304Not Modified，浏览器从缓存中加载。若两个字段不同，证明资源有变动，服务器正常返回资源。
参考：https://juejin.im/post/5a7a8e…https://juejin.im/post/59c602…
