使用缓存是前端性能优化的重要方式，既可以提高响应的速度又可以减少不必要的重复请求，从而提高服务器的吞吐量。但是有时候缓存并不适用于所有情况，有时候反而会使用户体验变差，因此需要根据不同的请求制定不同的缓存策略。
什么是浏览器缓存
浏览器缓存就是浏览器把一个已经请求过的Web资源拷贝一份副本储存在本地磁盘中。当再次访问相同的URL时，浏览器会根据缓存机制决定是直接使用副本响应访问请求，还是向服务器再次发送请求。
缓存规则
在浏览器第一次发起请求时，本地无缓存，向web服务器发送请求，服务器起端响应请求，浏览器端缓存。
在第一次请求时，服务器会将页面最后修改时间通过Last-Modified标识由服务器发送给客户端，客户端记录修改时间；服务器还会生成一个Etag，并发送给客户端。当浏览器后续再次进行请求时则会首先获取该资源缓存的header信息，然后根据Cache-Control和expires来判断是否过期。若没过期则直接从缓存中获取资源信息，包括缓存的header的信息，所以此次请求不会与服务器进行通信。如果缓存过期，浏览器会向服务器发送请求，本次请求会带着第一次请求返回的有关缓存的header字段信息。
浏览器端的缓存规则是通过HTTP协议头和HTML页面的Meta标签来定义的，分为强制缓存和协商缓存两种。
使用HTML Meta 标签
为了提高速度一些浏览器会缓存浏览者浏览过的页面，通过在HTML页面的节点中加入标签可以
<!-- 仅有IE才能识别这段meta标签含义，Pragma是http1.0版本中给客户端设定缓存方式之一，pragma与no-cache用于告诉浏览器当前页面不被缓存，但是页面上的资源则不受影响，而且浏览器将无法脱机浏览 -->
<meta http-equiv="Pragma" content="no-cache">
<!-- cache-control常见的取值有private、no-cache、max-age、must-revalidate等，默认为private -->
<meta http-equiv="cache-control" content="no-cache">
<!-- Expires用于设置网页的过期时间，如果设置为0表示立即过期 -->
<meta http-equiv="expires" content="0">
使用HTTP消息报头
| 类型 | 消息包头 | 值/示例 | 作用 | 备注 |
|---|---|---|---|---|
| 响应头 | Pragma | no-cache | 告诉浏览器忽略资源的缓存副本，每次访问都需要去服务器拉取 | http1.0中存在的字段，在http1.1中使用Cache-Control替代，为了做http协议的向下兼容，可保留这个字段 |
| Expires | Mon, 15 Aug 2016 03:56:47 GMT | 启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间，如果还没过该时间点则不发请求 | http1.0中存在的字段，该字段所定义的缓存时间是相对服务器上的时间而言的，如果客户端上的时间跟服务器上的时间不一致（特别是用户修改了自己电脑的系统时间），那缓存时间可能就没意义了。在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代 | |
| Cache-Control | no-cache | 缓存，但缓存立即失效，强制每次请求直接发送给服务器，拉取资源配合 ETag 使用。 | Cache-Control优先级高于Expires，并且Cache-Control指令可以组合使用 | |
| no-store | 强制缓存在任何情况下都不要保留任何副本 | |||
| max-age=[秒] | 指明缓存副本的有效时长，从请求时间开始到过期时间之间的秒数 | |||
| public | 与private对立，任何路径的缓存者（本地缓存、代理服务器）都可以利用缓存 | |||
| private | 缓存响应指令，表示只对当前的服务提供缓存服务，对于其他用户的请求，缓存服务器不会返回缓存 | |||
| s-max-age = time | 仅在代理服务器中生效，覆盖 max-age 效果。只限于供多位用户使用的公共缓存服务器 | |||
| max-stable = time | 在 time 时间内，即使缓存失效，也使用缓存。 | |||
| min-fresh = time | 要求返回至少还没过指定时间的缓存 | |||
| Last-Modified | Mon, 15 Aug 2016 03:56:47 GMT | 告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时，会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端 | 只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间 | |
| ETag | “fd56273325a2114818df4f29a628226d” | 告诉浏览器当前资源在服务器的唯一标识符（生成规则由服务器决定） | Etag虽然能够更加准确的控制缓存，但是需要注意的是因为每台机器生成的etag都会不一样，分布式系统里多台机器间文件的last-modified必须保持一致，以免负载均衡到不同机器导致比对失败 | |
| 请求头 | If-Modified-Since | Mon, 15 Aug 2016 03:56:47 GMT | 其值为上次响应头的Last-Modified值，再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源被改动过，则响应整片资源内容（写在响应消息包体内），包括更新Last-Modified的值，HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304(无需包体，节省浏览)，告知浏览器继续使用所保存的cache | |
| If-None-Match | “fd56273325a2114818df4f29a628226d” | 当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match（Etag的值）。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对，决定返回200或304 |
强制缓存
强制缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间，强制缓存中，普通刷新会忽略它，但不会清除它，需要强制刷新。浏览器强制刷新，请求会带上Cache-Control:no-cache和Pragma:no-cache。
协商缓存
协商缓存是由服务器确定缓存资源是否可用。主要涉及到Last-Modified/If-Modified-Since和Etag/If-None-Match两组header字段，并且都需要配合Cache-Control使用。
Last-Modified和ETag可以一起使用，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified。
其他
用户的行为也会影响浏览器缓存行为，比如：用户操作、地址栏回车、页面链接跳转、新开窗口、前进、后退都会校验缓存，F5刷新会忽略强制缓存(重置max-age=0)，Ctrl+F5刷新则强制不使用缓存（重置Cache-Control=no-cache，请求头丢弃Last-Modified/Etag选项）。
如果HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache（HTTP1.0）、Cache-Control:max-age=0或既Last-Modified/Etag也不包含Cache-Control/Expires则请求无法被缓存，同时post请求也无法被缓存。
参考：https://www.cnblogs.com/slly/p/6732749.html
