缓存

约 1268 字大约 4 分钟

2021-03-10

介绍一下缓存策略？什么是强制缓存，什么是协商缓存。

浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上最近请求过的文档进行存储，当用户再次访问这个文档时，浏览器会从本地磁盘显示此文档，从而提升页面加载速率。

作用：

减少延迟，让网站的运行速度更快，提升前端页面性能，带来更好的用户体验；
避免网络拥塞，减少请求量，减少输出带宽，对服务器压力减小；

强制缓存 200（也称强缓存）

指当浏览器在第一次请求资源时在http响应头设置一个过期时间，服务端就在respone header里面对该文件做了缓存配置，在时效内都将直接从浏览器缓存中进行获取，不会向服务器发送请求。在chrome控制台的network选项中可以看到该请求返回200的状态码;

常见头部参数信息：

Expires（常用）：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。
Cache-Control（常用）：当值设为max-age=120时，则代表在这个请求正确返回时间（浏览器也会记录下来）的2分钟内再次加载资源，就会命中强缓存。（Cache-Control的max-age优先级高于Expires）
no-cache：不使用本地缓存。需要使用缓存协商，来验证是否过期；
no-store：不可缓存；
public：客户端和代理服务器都可缓存；
private：只能有客户端缓存；

协商缓存 304

强制缓存给资源设置了过期时间，在未过期时，可以说是给用户自给自足用的。但是当资源过期时，就需要去请求服务器，这时候请求服务器的过程就可以设置成协商缓存。协商缓存就是需要客户端和服务端进行交互的。协商缓存将缓存信息中的Etag和Last-Modified通过请求发给服务器，由服务器校验，如果未修改，返回状态码304时，浏览器可以直接使用缓存，如果修改则从服务器重新获取。

常见头部参数信息：

Etag：即文件hash，每个文件唯一。web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）；（Etag的优先级高于Last-Modified）
If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etag声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存；
Last-Modify/If-Modify-Since：文件的修改时间，精确到秒。浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存；
Last-Modified缺点：
- 周期性修改，但内容未变时，会导致缓存失效
- 最小粒度只到s，s以内的改动无法检测到

共同点：都是从客户端中读取数据；

区别：强缓存不会发出请求，协商缓存会发出请求。

注意：

Etag要优于Last-Modified；
在优先级上，服务器校验优先考虑Etag；
在性能上，Etag要逊于Last-Modified。

常用缓存手段：cache-control中的max-age是实现内容cache的重要手段

max-age和ETag的组合；
仅max-age；
max-age和Last-Modified（If-Modified-Since）的组合；

304缓存的原理？

服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存
304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件
客户端请求一个页面（A）。服务器返回页面A，并在给A加上一个ETag。客户端展现该页面，并将页面连同ETag一起缓存。客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体