缓存的目的
一般而言，用户访问一个页面的频率总是远高于页面更新的频率，所以在大部分时间里用户访问该页面得到的html、js、css等内容都是相同的，如果每一次的访问都需要从服务器获取这些静态的内容，既降低了页面加载的速度，又大大地浪费带宽，显然是一件非常不划算的事情，所以，缓存机制就显得尤为重要。
http报文中与缓存相关的首部字段
- 通用首部字段（就是请求报文和响应报文都能用上的字段）
- ** 请求首部字段**
- ** 响应首部字段**
- ** 实体首部字段**
Cache-Control
浏览器缓存里, Cache-Control是金字塔顶尖的规则, 它藐视一切其他设置, 只要其他设置与其抵触, 一律覆盖之.不仅如此, 它还是一个复合规则, 包含多种值, 横跨 存储策略, 过期策略 两种, 同时在请求头和响应头都可设置.语法为: “Cache-Control : cache-directive”.
Cache-directive共有如下12种(其中请求中指令7种, 响应中指令9种):
Pragma
http1.0字段, 通常设置为Pragma:no-cache, 作用同Cache-Control:no-cache. 当一个no-cache请求发送给一个不遵循HTTP/1.1的服务器时, 客户端应该包含pragma指令. 为此, 勾选☑️ 上disable cache时, 浏览器自动带上了pragma字段. 如下:
Expires
即到期时间, 以服务器时间为参考系, 其优先级比 Cache-Control:max-age 低, 两者同时出现在响应头时, Expires将被后者覆盖.
ETag
实体标签, 服务器资源的唯一标识符, 浏览器可以根据ETag值缓存数据, 节省带宽. 如果资源已经改变, etag可以帮助防止同步更新资源的相互覆盖. ETag 优先级比 Last-Modified 高.
--------------------------------------------------华丽的分割线------------------------------------------------
缓存的三要素
浏览器对于请求资源时，按照发生的时间顺序分别为存储策略, 过期策略, 对比策略, 其中存储策略在收到响应后应用, 过期策略, 对比策略在发送请求前应用. 流程图如下所示：
1. 缓存存储策略
用来确定 HTTP 响应内容是否可以被客户端缓存，以及可以被哪些客户端缓存。这个策略的作用只有一个，用于决定 HTTP 响应内容是否可缓存到客户端。
对于 Cache-Control 头里的 Public、Private、no-cache、max-age 、no-store 他们都是用来指明响应内容是否可以被客户端存储的，其中前4个都会缓存文件数据（关于 no-cache 应理解为“不建议使用本地缓存”，其仍然会缓存数据到本地），后者 no-store 则不会在客户端缓存任何响应数据。
2. 缓存过期策略
客户端用来确认存储在本地的缓存数据是否已过期，进而决定是否要发请求到服务端获取数据。这个策略的作用也只有一个，那就是决定客户端是否可直接从本地缓存数据中加载数据并展示（否则就发请求到服务端获取）
数据缓存到了本地后需要经过Expires判断才能使用，Expires 指名了缓存数据有效的绝对时间，告诉客户端到了这个时间点（比照客户端时间点）后本地缓存就作废了，在这个时间点内客户端可以认为缓存数据有效，可直接从缓存中加载展示。
PS：Cache-Control：no-cache 和 Cache-Control：max-age=0 （单位是秒）相当。需要注意的是，缓存数据标记为已过期只是告诉客户端不能再直接从本地读取缓存了，需要再发一次请求到服务器去确认，并不等同于本地缓存数据从此就没用了，有些情况下即使过期了还是会被再次用到。
3. 缓存对比策略
将缓存在客户端的数据标识发往服务端，服务端通过标识来判断客户端缓存数据是否仍有效，进而决定是否要重发数据。
客户端检测到数据过期或浏览器刷新后，往往会重新发起一个 http 请求到服务器，服务器此时并不急于返回数据，而是看请求头有没有带标识（ If-Modified-Since、If-None-Match）过来，如果判断标识仍然有效，则返回304告诉客户端取本地缓存数据来用即可（这里要注意的是你必须要在首次响应时输出相应的头信息（Last-Modified、ETags）到客户端）。ETag优先级比Last-Modified高, 同时存在时, 前者覆盖后者。至此我们就明白了上面所说的本地缓存数据即使被认为过期，并不等于数据从此就没用了的道理了。三者关系图如下：
总结
HTTP 缓存机制实际上是 HTTP 缓存策略三个要素相互作用的集合。