http缓存策略主要分为两种方式：强缓存 (浏览器端执行)；协商缓存(服务器端执行)

优先级: 强缓存 > 协商缓存

3、强缓存

强缓存的两种方式：【Expires】、【Cache-Control】，cache-control是expires的完全替代方案，在可以使用cache-control的情况下就不要使用expires

强缓存不会向服务器发送请求，直接从缓存中读取资源，在 chrome 控制台的 network 选项中可以看到该请求返回 200 的状态码，并且size显示from disk cache或from memory cache。

（1）Expires：该字段是HTTP1.0版本提出的，是浏览器访问服务器时，由服务器在Response Headers字段中设置该资源过期时间。Expires:<最后期限>；表示该请求在<最后期限>前使用缓冲资源，过后再次请求则请会请求服务器获取新的资源。Expires告诉浏览器该内容在何时过期，暗示浏览器在该内容过期之前不需要再询问服务器，而直接使用本地缓存即可。

（2）Cache-Control：该字段是HTTP1.1提出的，该字段的值是 过期时长(类似一种倒计时的功能)，这样即使 服务器和浏览器日期时间不一致也不会导致Expires的问题，到了时间自动过期

Cache-Control：max-age=600；代表的是该请求的资源在600秒后过期, 600秒前使用缓存资源。

注意事项：

当Expires和Cache-Control同时存在时，优先使用HTTP1.1的Cache-Control

当强缓存的【Expires】、【Cache-Control】都不命中时，则进入协商缓存。

4、协商缓存

协商缓存的两种方式：【Last-Modified】、【ETag】，ETag并不是last-modified的完全替代方案，而是补充方案，具体用哪一个，取决于项目业务场景，无孰好孰坏之分

（1）Last-Modified：通过比对资源文件的修改时间进行协商缓存

Response Headers携带：Last-Modified:<昨天>

Request Headers携带：IF-Modified-Since:<昨天>

表示最后修改时间，是指请求的资源的最后修改时间，在浏览器第二次访问服务器时，会在Request Headers的If-Modified-Since中带上该字段的值(值来自服务器)，服务器接到请求后，会对If-Modified-Since的值与该请求资源的最后修改时间进行对比，若请求的资源最后修改时间大于If-Modified-Since的值，则返回新的资源，并重新设置Last-Modified字段的值。

Last-Modified存在问题：

（2）ETag：通过生成文件内容的唯一哈希值，即文件指纹进行协商缓存

E-Tag没有采用内容的最后修改时间，而是采用了一串编码来标记内容，称为ETag

Response Headers携带：E-Tag:1234567

Request Headers携带：If-None-Match:1234567