两个概念
-
强缓存
用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。 -
协商缓存
用户发送的请求，发送到服务器后，由服务器返回hash值（Etag）、文件最后修改时间（Last-modified）与客户端的If-None-Match、If-Modified-Since进行对比从而判断是否从缓存中获取资源。 -
两者共同点：客户端获得的数据最后都是从客户端缓存中获得。
-
两者的区别：从名字就可以看出，强缓存不与服务器交互，而协商缓存则需要与服务器交互
强缓存：
-
expires
Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。 -
Cache-Control 简单介绍下Cache-Control的属性设置：
max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires
public：响应会被缓存，并且在多用户间共享。默认是public。
private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。
no-cache: 指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
no-store: 绝对禁止缓存。
协商缓存：
-
- Last-modified: 表明请求的资源上次的修改时间。（Last-modified与If-Modified-Since相同则使用缓存）（Last-modified与If-Modified-Since相同证明文件没有被修改）
- If-Modified-Since：客户端保留的资源上次的修改时间。
- Etag：资源的内容标识。（不唯一，通常为文件的md5或者一段hash值，If-None-Match与Etag相同则使用缓存）（If-None-Match与Etag相同证明文件没有被修改）
- If-None-Match： 客户端保留的资源内容标识。
项目中常用的缓存方式：
1. 如果有用到webpack等打包工具的，建议使用强缓存（Cache-control方式，设置max-age时间可以长一些）+webpack打包使用hash文件名实现浏览器缓存与缓存更新。（这是目前最优的解决方案）
2. 如果项目中没有用到webpack等打包工具的，建议使用协商缓存来解决缓存问题（协商缓存较消耗性能，且google浏览器会出现无法获取最新的Etag、Last-modified等情况。火狐浏览器正常。）。