示意图
（借用网上一张图片，帮助理解）
缓存流程
浏览器在第一次请求的时候会将服务器返回的资源进行缓存。
1、强缓存
再次请求的时候会获取缓存资源的header信息。根据response header中的expires 和 cache-control 判断是否命中缓存。
1、expires：该字段储存的时间标识表示该资源过期的时间点，在这个时间点之后，缓存的资源过期，需要重新提交服务器进行验证。
缺点：可能因为客户端与服务端时间不一致、或网络延迟导致过期时间不准确
2、cache-cotrol：通过不同的指令可以提供更加精确地控制缓存功能。
常见指令
max-age: 和expires相似，不过该参数是设置一个秒数，相对于请求时间进行记录。（max-age=60超过60s后该缓存过期）no-cache：在使用缓存的资源副本之前，强制提交服务器进行验证（协商缓存）no-store: 不使用任何缓存
更多详细指令：cache-cotrol
2、协商缓存
在强缓存没有命中的时候，浏览器会发送请求到服务器。这个请求会通过If-None-Match 和If-Modified-Since携带上第一次请求缓存的ETag和Last-Modified。
| 服务器生成 | 浏览器请求携带 |
|---|---|
| ETag | If-None-Match |
| Last-Modified | If-Modified-Since |
1、ETag 和 If-None-Match
1）在第一次请求的时候，服务器根据资源生成一段特有的标识符，会将ETag:hjk34321dsj4kh43加到response header中返回。
2）当再次请求的时候，浏览器会在request header中携带 If-None-Match:hjk34321dsj4kh43。
3）服务器在拿到请求中的If-None-Match后：
- 如果发现服务器上没有任何一个资源的
ETag属性和其相同，则服务器会响应200，将资源实体以及ETag返回。 - 如果有相同的资源，则服务器会响应304。
4）浏览器在得到响应后：
- 如果是200，则会使用服务器返回的资源，以及将携带的资源和
ETag进行缓存。 - 如果是304，浏览器则会使用上一次请求缓存的资源。
2、Last-Modified 和 If-Modified-Since
1）在第一次请求的时候，服务器根据资源最后修改时间，将Last-Modified:Wed, 21 Oct 2020 07:28:00 GMT加到response header中返回。
2）当再次请求的时候，浏览器会在request header中携带 If-Modified-Since:Wed, 21 Oct 2020 07:28:00 GMT。
3）服务器在拿到请求中的If-Modified-Since之后，会和服务器上资源的最后修改时间作对比。
- 如果
If-Modified-Since的时间不是最早的时间。则服务器会响应200，将资源实体以及Last-Modified返回。 - 如果是最早的时间，则服务器会响应304。
4）浏览器在得到响应后：
- 如果响应是200，呈现服务器返回的资源，以及将携带的资源和
Last-Modified进行缓存。 - 如果是304，浏览器则会呈现上一次请求缓存的资源。
