在前端开发中，性能一直是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
缓存分类
web缓存分为很多种，比如数据库缓存、代理服务器缓存、还有CDN缓存，以及浏览器缓存
浏览器先向代理服务器发起web请求，再将请求转发到源服务器。代理服务器属于共享缓存，所以很多地方都可以使用其缓存资源，因此对于节省流量有很大的作用
浏览器缓存是将文件保存在客户端，在同一个会话过程中会检查缓存的副本是否足够新，在后退网页时，访问过的资源可以从浏览器缓存中拿出来使用。
浏览器缓存
页面的缓存状态是由header决定的，header的参数有四种
一、cache-control（重要策略）
cache-control包括max-age/s-maxage/public/private/no-cache/no-store/must-revalidate等
1、max-age（单位为s）指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在max-age这段时间里浏览器就不会再向服务器发送请求了。
2、 s-maxage 为代理服务器设置不同的缓存策略
对于熟悉http的人来说，max-age不仅在cache-control中使用，连cookie都会用到。s-maxage在一些小项目中可能并不会用到，但是在基于各种代理的大型架构中就需要考虑代理服务器的缓存问题。
每一层代理都有自己的缓存机制。如果是一层完全基于http的代理，应用服务器的缓存机制就会在代理服务器上被应用。对于一些不会改变的静态资源，我们希望客户端一直缓存下去，这时候我们通常会设置max-age=31536000（一年）之类的，但是如果代理服务器也遵循http缓存的规范，这个max-age就会被应用。也就是说，代理服务器也会缓存这个资源一年。这不是在浪费代理服务器的磁盘空间么。所以我们有时候会对代理服务器使用一些不一样的缓存策略。比如我们虽然让客户端缓存一年，但是希望让代理服务器缓存一天就够了。于是在设置max-age=31536000的同时还可以设置s-maxage=86400
标准的http代理服务器都实现了s-maxage的解析，比如nginx，我们可以在它的http_upstream模块中找到实现的代码。但一些其他兼职的http代理服务器上，实现方式就很奇奇怪怪的了。
s-maxage是一个在RFC2616中就定义的东西。规范定义了代理服务器会优先考虑s-maxage，所以我们才可以对代理服务器和终端用户设置不同的缓存策略
- public指定响应会被缓存，并且在多用户间共享。如果没有指定public还是private，则默认为public。public表明响应可以被任何对象（包括发送请求的客户端、代理服务器等等）缓存
- private响应只作为私有的缓存，不能在用户间共享。如果要求http认证，响应会自动设置为private。表明响应只能被单个用户缓存，不能作为共享缓存，所以代理服务器不能缓存它
- no-cache指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
禁用缓存：
cache-conctrol:no-cache,no-store,must-revalidate
- no-store绝对禁止缓存，一看就知道如果用了这个命令当然就不会进行缓存，每次请求资源都要从服务器重新获取。
- must-revalidate缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。
- no-cache:告诉浏览器、代理服务器，不管本地副本是否过期，在使用资源副本之前，一定要到源服务器进行副本有效性校验
- must-revalidate: 告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。
二、 Expires
缓存的过期时间，用来指定资源到期的时间，是服务器端的具体时间点。也就是说Expires=max-age+请求时间，需要和last-modified结合使用。但是上面提到，cache-control的优先级更高。Expires是web服务器响应消息头字段，在响应http请求时告诉浏览器过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
三、 Last-modified
服务器端文件的最后修改时间，需要和cache-control共同使用，是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时，会向服务器传送if-modified-since报头，询问last-modified时间点之后资源是否修改过。如果没有修改，则返回304，使用缓存；如果修改过，则再去服务器请求资源，返回码为200.
四、 ETag
根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。浏览器会将这串字符串传回服务器，验证资源是否已经修改。如果没有修改，则过程如下
客户端----请求页面a---->服务器
客户端<----页面+ETag----服务器
客户端----再次请求页面a+Etag---->服务器
服务器----检查ETag---->服务器
客户端<----304+空响应----服务器
使用ETag可以解决last-modified存在的一些问题
- 某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新
- 如果资源修改非常频繁，在秒以下的时间内进行修改，而last-modified只能精确到秒
- 一些资源的最后修改时间变了，但是内容没变，使用ETag就认为资源还是没有修改
使用缓存的流程
设置缓存的方法
第一种：HTML Meta标签控制缓存（非HTTP协议定义）
<meta http-equiv="Pragma" content="no-cache">
上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。这种方法使用时很简单，但是只有部分浏览器可以支持，而且所有的缓存代理服务器都不支持，因为代理不解析HTML内容本身。
第二种 HTTP头信息控制缓存
HTTP头信息控制缓存是通过Expires（强缓存）、cache-control（强缓存）、Last-Modified/if-Modified-Since（协商缓存）、ETag/if-None-Match（协商缓存）实现。
1. Expires
Expires是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示
缺点：Expries是较老的强缓存管理header，由于他是服务器返回的一个绝对时间，这样就存在一个问题，如果客户端的时间与服务器的时间相差很大（比如时钟不同步，或者跨时区），那么误差就很大，所以在HTTP1.1版本开始，使用cache-control：max-age=秒代替。
2. cache-control
cache-control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，cache-control的缓存管理更有效，更安全一点
cache-control的值可以是public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age
各个消息中的指令含义如下：
public指示响应可被任何缓存区缓存
private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当前用户的部分响应消息，此响应消息对于其他用户的请求无效。
no-cache指示请求或响应消息不能缓存，该选项并不是说可以设置“不缓存”，而是需要和服务器确认。
no-store在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下来
max-age指示客户端可以接收生存期可以不大于指定时间（以秒为单位）的响应，上次缓存时间（客户端的）+max-age（64200s）< 客户端时间
min-fresh指示客户端可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户端可以接收超出超时期内的响应消息。如果指定max-stale消息的值，那么客户端可以接收超出超时期指定值之内的响应消息。
注意：这两个header可以只启用一个，也可以同时启用，当response header中，expires和cache-control同时存在时，cache-control优先级高于expires
3. Last-Modifiied/if-Modified-Since
Last-Modified-Since要配合Cache-Control使用
Last-Modified：标识这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间
if-Modified-Since：当资源过期时（强缓存失效），发现资源具有Last-modified声明，则再次向web服务器请求时带上头if-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since，则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304（无需包体，节省浏览），告诉浏览器继续使用所保存的cache。
4. ETag/if-none-match
ETag/if-none-match也要配合cache-control使用
ETag:web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器制定）。apache中，ETag的值，默认是对文件的索引节（INode），大小（size）和最后修改时间（MTime）进行hash后得到的。
if-none-match：当资源过期时（使用cache-control标识的max-age)发现资源有ETag声明，则再次向web服务器请求时带上if-none-match（ETag的值），web服务器收到请求后发现有if-none-match则与被请求资源的相应校验串进行比对，决定返回200还是304.
ETag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标志符，能够更加准确地控制缓存。Last-Modified与ETag一起使用时，服务器会优先验证ETag
用户行为与缓存
浏览器缓存行为还有用户的行为有关
| 用户操作 | expires/cache-control | last-modified/ETag |
|---|---|---|
| 地址栏回车 | 有效 | 有效 |
| 页面链接跳转 | 有效 | 有效 |
| 新开窗口 | 有效 | 有效 |
| 前进、后退 | 有效 | 有效 |
| f5/按钮刷新 | 无效（BR重置max-age=0） | 有效 |
| ctrl+f5刷新 | 无效（重置cache-control=no-cache | 无效（请求头丢弃该选项） |
网友评论