HTTP缓存：
分为两种:强缓存与协商缓存, 强缓存是不需要发送HTTP请求的, 而协商缓存需要; 发送请求之前, 会先检查一下强缓存, 如果命中直接使用，否则就进入下一步;
强缓存
Expires强缓存(http/1.0):
Expires字面意思表示的是有效期, 表示的就是一个具体的时间. 例如：Expires: Wed, Nov 11 2020 08:00:00 GMT；
但是服务器的时间与浏览器的时间不一致的时候(比如你手动修改了本地的时间), 那么就可能会造成缓存失效, 因此这种方式强缓存方式并不是很准确, 它也因此在HTTP/1.1中被摒弃了.
Cache-Control强缓存（http/1.1）:
1.返回头Response Headers 有 key 是 Cache-Control键值对；根据值判断是否缓存，确定缓存，那么不需要发送HTTP请求；
2.会覆盖Expires;
3.HTTP/1.1使用的是Cache-Control来判断，下面是常用指令，可以组合使用；
public和private：
public(代理级缓存):客户端和代理服务器都可以缓存；比如一个请求要经历 Browser -> proxy1 -> proxy2 -> Server. 下次再请求同一资源的时候, 直接到proxy1中拿缓存的东西而不必向proxy2拿；
private(浏览器级缓存): 只有客户端（浏览器）缓存，服务器不缓存；
现在的应用基本不会有B/S结构，整个web架构都是一层层堆砌起来的，浏览器到服务器中间或者还有很多层代理服务；业务逻辑产生的内容来看，缓存分为2类，公共的资源（最新文章列表）和私有资源（猜你喜欢），如果服务器都缓存，当海量请求发送过来，服务器分分钟都可能被压爆，所以才会对缓存分级，对应的就是 Cache-Control 的 public 和 private。中间层的代理服务器不应该把 private 的内容给缓存下来；
no-cache: 表示不进行强缓存验证, 而是用协商缓存来验证.
no-store: 所有内容都不会被缓存, 也不进行协商缓存
max-age: 过期时间, max-age=300表示在300s后缓存内容失效.
max-stale: 能容忍的最大过期时间。max-stale指令表示愿意接收一个已经过期了的响应。
例子：Cache-Control: public, max-age=300 任何对象(客户端, 代理服务器等)缓存, 且过期时长为300秒；
备注：请求头（request headers）也有Cache-Control,：Cache-Control: no-cache表示:是浏览器通知服务器：本地没有缓存数据
Cache-Control 与 Expires 对比:
-
Expires产于HTTP/1.0,Cache-control产于HTTP/1.1; -
Expires设置的是一个具体的时间,Cache-control可以设置具体时常还有其它的属性; -
两者同时存在,
Cache-control的优先级更高; -
在不支持
HTTP/1.1的环境下,Expires就会发挥作用
协商缓存
协商缓存（前提是cache-control标识的 max-age 过期了，或者设置了协商缓存）
概括来说就是浏览器会携带缓存标识(tag)向服务器发送请求, 服务器会根据缓存标识(tag)来决定是否使用缓存；
两种情况：1.协商缓存生效，返回304 Not Modified; 2.返回200数据库获取最新数据;
缓存标识(tag)也是有两种: Last-Modified 和 ETag;
协商缓存 Last-Modified / If-Modified-Since：
1.第一次向服务器请求这个资源，服务器返回资源时, 在响应体的header中添加Last-Modified, 值为该资源在服务器上最后的修改时间；
2.浏览器接收到后缓存文件和这个header，再次请求检测到有Last-Modified, 就会在请求头中添加If-Modified-Since这个header, 值就是Last-Modified；
3.服务器再次接收到该资源的请求, 则根据If-Modified-Since与服务器的最后修改时间做对比；
4.对比相同，返回304，不同则重新获取数据，返回200(同时返回最新的Last-Modified)
协商缓存：ETag / If-None-Match：
ETag其实与Last-Modefied的原理差不多, 不过它不是根据资源的最后修改时间来判断的, 而是通过一个唯一的标识；
1.在浏览器请求服务器资源的时候, 服务器根据当前文件的内容, 给文件生成一个唯一的标识, 若是文件发生了改变, 则这个标识就会改变
2.服务器会将这个标识ETag放到响应体的header中与请求的资源一起返回, 浏览器会缓存文件与这个header
3.下一次再次加载该资源时, 浏览器会将刚刚缓存的ETag放到请求体头部(request header)的If-None-Match里发送给服务器
4.服务器接收到了之后与该资源自身的ETag做对比, 一致,返回304知会客户端直接使用本地缓存;若是不一致, 返回200和最新的资源文件(包括最新的ETag)
注意：
ETag/If-Not-Match是在HTTP/1.1出现的，主要是解决以下问题：
(1)、Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间
(2)、如果某些文件被修改了，但是内容并没有任何变化，而Last-Modified却改变了，导致文件没法使用缓存
(3)、有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形
ETag 与 Lasr-Modified 的对比：
Last-Modified缺点：
打开了缓存文件, 并没有进行修改, 也还是会改变最后修改时间, 导致缓存失败；
Last-Modified是以秒来计时的, 某个文件在一秒内被修改了很多次, 这时候的还是返回304；
有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形；
时间改变了，但是内容没有修改，还是认为文件被修改（etag没有这问题）
ETag缺点：
性能上的不足,只要文件发生改变,ETag就会发生改变. ETag需要服务器通过算法来计算出一个hash值；
总结：
- 准确度上
ETag更强; - 性能上
Last-Modified更好; - 两者都支持的话,
ETag优先级更高.
- 准确度上
缓存状态码：
未缓存：Status Code: 200
强缓Expires/Cache-Control存失效时，返回新的资源文件
强缓存：Status Code: 200 (from disk cache)
从磁盘当中取出的，不会请求服务器;
存在硬盘当中的，浏览器关闭后，再次打开仍会from disk cache；
强缓存：Status Code: 200 (from memory cache)
字直接从内存中拿到的，不会请求服务器;
页面关闭内存释放，再次打开不会出现from memory cache；
协商缓存：Status Code: 304 Not Modified
如何使用HTTP缓存：
1、html页面缓存的设置主要是在<head>标签中嵌入<meta>标签，这种方式只对页面有效，对页面上的资源无效
<meta http-equiv="pragma" content="no-cache">
html设置缓存如下：
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
2、静态资源的缓存一般是在web服务器上配置的，常用的web服务器有：nginx、apache。
HTTP缓存的几个注意点：
1、强缓存情况下，只要缓存还没过期，就会直接从缓存中取数据，就算服务器端有数据变化，也不会从服务器端获取了。决解的办法有：在修改后的资源加上随机数,确保不会从缓存中取。
例如：
http://www.kimshare.club/kim/common.css?v=22324432
http://www.kimshare.club/kim/common.2312331.css
2、尽量减少304的请求，因为我们知道，协商缓存每次都会与后台服务器进行交互，所以性能上不是很好。从性能上来看尽量多使用强缓存。
参考：https://mp.weixin.qq.com/s?__biz=MjM5MDE2NjYxNw==&mid=2447866020&idx=1&sn=74d965f9f29c8408d93da49031b42507&chksm=b25b2392852caa8430981da2bcc56deddb68547e10288566a8e946c34e77c6b93406ff87da88&scene=21#wechat_redirect