一、什么是浏览器缓存？

为了节约网络资源的加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以直接从本地磁盘读取资源并展示，这样就可以加速页面的阅览。注意：所有

二、缓存的好处有哪些？

1.缓解服务器压力(不用每次去服务器请求资源)；

2.提升性能(打开本地资源速度当然比打开请求回来资源的速度要快得多)；

3.减少带宽消耗(获取数据相当于下载资源的过程，必定会占用一定的网络带宽——就是您家的网速啦~)；

三、缓存策略

根据获取资源的请求头（Headers）判断它是否命中强缓存，如命中，则浏览器返回200，并直接从本地获取缓存资源，不会发请求到服务端；如没有没命中强缓存，客户端会发送请求到服务端，服务端通过请求头（Headers）里面字段验证这个资源是否命中协商缓存（启发式缓存），如命中，服务端将请求返回304，但不返回资源，从而告诉客户端直接从缓存中获取资源；当协商缓存也没命中时，服务端将返回200，并将资源发送给客户端。

1.什么是强缓存？

概念：客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源同时，告诉客户端将这个资源保存在本地，并且在未来的某个时点之前如果还需要这个资源，直接从本地获取就行了，不用向服务器请求。这种方式缓存下来的资源称为强缓存。

建立关系：

a.浏览器第一次跟服务器请求一个资源，服务器在返回这个资源时，在相应头部会加上Cache-Control:max-age=xxx（http1.0中是expries字段，同时出现使用cache-control），如下图：

b.浏览器接收到资源后，连同response header一起缓存下来；

c.浏览器再次请求同一个资源时，会先从缓存中找到这个资源，获取date(第一次资源返回的响应时间)和Cache-Control中的max-age并计算出一个有效期(date + max-age)，然后再和浏览器请求时间比较最后判断是否命中缓存；

d.如果没有命中缓存，浏览器直接向服务器发起请求，Cache-Control会在重新获取到服务器返回资源时更新。

Cache-Control的值及含义：

public指示响应可被任何缓存区缓存，包括终端用户和CDN等代理服务器。

private只允许被终端用户的浏览器端缓存，对于单个用户的整个或部分响应消息，不能被代理服务器将其保存在共享缓存里。服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。

no-cache禁止使用强缓存，设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，过期时间max-age=0。

no-store禁止使用缓存，每次都要去服务器重新请求，用于防止重要的信息被无意的发布。

max-age表示自第一次收到响应后的xxx ms以后可以用缓存。

min-fresh表示客户端希望在指定的时间内获取最新的响应。

max-stale表明客户端愿意接收一个已经过期的资源。 可选的设置一个时间(单位秒)，表示响应不能超过的过时时间。

注意：命中强缓存时，浏览器同样会收到status=200的response，chrome中可通过size区分从服务器返回的资源还是强缓存获得的资源。

2.什么是协商缓存？

概念：客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源同时，将该资源的一些信息也返回给客户端，告诉客户端将这个资源缓存在本地。当客户端下一次需要这个资源时，将请求以及相关信息一并发送给服务器，由服务器来判断客户端缓存的资源是否需要更新：如不需要更新，就直接告诉客户端获取本地缓存资源（304）；如需要更新，则将最新的资源连同相应的信息一并返回给客户端。

建立关系：

Last-Modified & If-Modified-Since（缺点：无法精确到毫秒）

a.浏览器第一次请求一个资源，服务器返回了该资源时，会在response headers中加上Last-Modified，这个response headers表示这个资源在服务器上的最后一次修改时间；

b.当浏览器再次请求该资源时，会在request headers中加上If-Modified-Since，这个值即为上一次服务器返回的Last-Modified时间；服务器再次收到资源请求时，将If-Modified-Since时间和资源在服务器上的最后修改时间与对比，如果If-Modifid-Since与最后修改时间一致，则命中缓存，服务器返回304，浏览器从缓存中获取资源；

c.若未命中缓存，服务器返回资源同时，浏览器缓存资源的Last-Modified会被更新。

ETag & If-None-Match（缺点：ETag本身需要消耗 CPU，而它的优先级比 Last-Modified 高，当它存在时服务器无论 Last-Modified 是否存在都会使用它判断，ETag在分布式系统中生成的值可能不一样，会导致缓存失效）

a.浏览器第一次请求一个资源，会在response headers中加上ETag（这个ETag是根据该资源生成的唯一标识，这个唯一标识是个字符串，只有服务器认为资源有变化且应该提供新的资源时才会改变ETag），浏览器将资源连同ETag一并缓存。

b.当浏览器再次请求该资源时，会在request headers中加上If-None-Match，该值即为第一次服务器返回的ETag值；

c.服务器收到资源请求后，会根据要请求的资源重新计算生成相应的ETag，然后与If-None-Match比较。对比结果一致即命中缓存，不一致则未命中缓存，返回资源同时将新的ETag。

以下情况使用ETag & If-None-Match，除此之外使用Last-Modified & If-Modified-Since：

1.存在周期性重写某些资源，但资源实际包含的内容并无变化；

2.被修改的信息并不重要，如注释等；

3.Last-Modified无法精确到毫秒，但有些资源更新频率有时会小于一秒。

四、常见缓存方式

1.获取静态资源：

Cache-Control: public, max-age=31536000

Expires: (一年后的今天)

ETag: (基于内容生成)

Last-Modified: (过去某个时间)

Vary:Accept-Encoding

2.获取动态资源：

Cache-Control: public, max-age=0

Expires: (当前时间)

ETag: (基于内容生成)

Last-Modified: (过去某个时间)

Vary:Accept-Encoding

五、缓存处理

1.图片缓存：

通过前端变化，让js每次生成一个随机数作参数放在url后边

2.js、css缓存：

a.引入js、css文件时加个版本号，如果每次发布新的js代码，更新对应的版本号。

b.如果内容较少可以通过script和style标签将js和css代码写到html页面中，但内容较多时不容易维护

3.接口缓存：

在请求的接口后面加一个时间戳

4.微信缓存页面