浏览器缓存的作用
- 加快页面打开速度
- 减轻服务器压力
- 减少网络损耗
浏览器缓存的两种方式
- meta标签控制
- header头部信息缓存机制
meta标签控制 设置content-type expires pragma refresh 但是存在兼容问题，不靠谱。所以我们还是研究研究header头部信息控制的方式吧。
头部信息缓存机制有两种
- 强缓存
- 协商缓存
强缓存
浏览器加载资源时，第一步判断它是否是强缓存，如果是，浏览器直接从自己的缓存中读取，不会向服务器发送请求。
我们通过一张图来看看啊
status 200 在控制台的size栏我们会看到资源大小，如果是缓存直接在本地读取
from memory cache 来自内存缓存
from dist cache 来自磁盘缓存
再看一张图来详解头部信息缓存机制
浏览器加载资源时先判断头部信息是否包含Cache-Control和Expires这两个属性
Expires是http1.0 Cache-Control是http1.1 两个同时存在的时候Cache-Control的优先级更高。
从截图可以看出
Expires设置的是一个GMT格式的时间、它是过期时间 是个绝对时间
浏览器收到response时看看有没有Expires字段，如果有的话缓存头信息和资源，再次请求时查看缓存时间过没过，没过从缓存拿出来，过了重新请求。
Cache-Control 承载的值比较多
max-age 缓存的内容将在 xxx 秒后失效 是个时间间隔 是个相对时间
public 所有内容都将被缓存（客户端和代理服务器都可缓存）
private 内容只存到私有缓存中 （仅客户端可以缓存，代理服务器不可缓存）
no-cache 必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求，因此，如果存在合适的验证令牌（ETag），no-cache会发起往返通信来验证缓存的响应，如果资源未被更改可以避免下载。 跳过强缓存直接进入协商缓存。
no-store 所有内容都不会被缓存
must-revalidation/proxy-revalidation 如果缓存内容失效，请求必须发送到服务器/代理以进行重新验证。
协商缓存
当浏览器判断不是强缓存，就会向服务器发送请求，判断是否是协商缓存
Last-Modified和If-Modified-Since
1、浏览器第一次向服务器发请求，服务器返回资源并在response header加上Last-Modified字段，表示资源最后修改时间
2、浏览器再次请求这个资源时，请求头会加上If-Modified-Since字段，如果这两个资源一样，说明资源没有被修改，返回304 Not Modified ,浏览器从缓存获取资源。若这两个资源不一样，说明资源被修改过，服务器正常返回资源。
但是有时候服务器资源有变化，但最后修改时间没更新，就使用下面两个字段
ETag、If-None-Match
1、浏览器第一次向服务器请求，服务器返回资源并在response header上加ETag资源。表明资源本身，资源有变化则该字段有变化。
2、浏览器再次请求这个资源时，请求头携带If-None-Match字段，若这两个字段相同，说明资源没有被修改，返回304 Not Modified ,浏览器从缓存获取资源。若这两个资源不一样，说明资源被修改过，服务器正常返回资源。
服务器如何判断缓存已失效
服务器通过If-Modified-Since(Last-Modified)和If-None-Match(ETag)这两个属性的值来判断缓存是否失效。两个同时存在的时候优先ETag。
