HTTP缓存策略：强缓存和协商缓存

前言

本文主要讲解浏览器缓存中的强缓存（本地缓存）和协商缓存（弱缓存）。

缓存概念

浏览器缓存是指浏览器对之前请求过的文件进行缓存，以便下一次访问时候进行使用。

浏览器有几种缓存

四大类，如果按优先级顺序来排序则为：内存缓存（memory Cache）Service Worker Cache、HTTP缓存（HTTP Cache）、推送缓存（Push Cache）。本文主要讲解HTTP缓存。

缓存优点

1. 通过减少服务器负担来提高网站性能
2. 减少网络数据传输、节省带宽：因为缓存本质就是让浏览器重用已经获取的资源，而无需重新下载，因此就减少了服务器请求次数，同时降低带宽消耗。
3. 降低延迟：缓存从本地读取，减少了客户端和服务端的交互，降低页面加载时间。因此加快浏览器访问网页速度。
4. 离线也可以支持：缓存可以使浏览器在离线状态下也可以加载已缓存资源。

缓存缺点

1. 缓存一致性：多个用户共享相同缓存代理，其中某个用户更新资源，其他用户还是旧资源，导致资源不一致问题。
2. 过期数据处理：缓存数据有过期时间，服务器更新资源但客户端还使用旧缓存，导致数据不正确。

强缓存

强缓存是浏览器缓存常用策略之一，它的特性就是一句话：在使用强缓存进行读取资源且强缓存没过期时，不向服务器发送任何请求，直接从本地缓存中提取文件并返回状态码200。

当浏览器第一次访问某网站时，会向网站服务器发送请求，服务器觉得浏览器请求的资源应该被缓存，如静态图片、CSS文件等资源，不想每次被访问时都携带这些内容，则会在HTTP响应中添加响应头Cache-Control：max-age=1000，max-age表示当前缓存有效时间为1000s，这就让浏览器自动将请求缓存到本地。下次请求该资源时，浏览器先看本地缓存（强缓存）过期没，没过期直接使用，返回状态码200，同时添加（from memory cache 或 from disk memory）标识，表示该文件从缓存中拿到，没发送请求。
如果过期了且无下文讲到的协商缓存，就重新开始最初的循环。

除了HTTP1.1中Cache-Control字段外，HTTP1.0中Expires也控制强缓存。它的值是一个绝对时间的GMT格式的时间字符串。比如网页的Expires值是：expires:Mar, 08 Fir2023 14:23:02 GMT。代表资源失效时间，只要发送请求是在Expires之前，本地缓存就好使，由于失效时间是一个绝对时间，当服务端和客户端有大偏差时可能会出现缓存出现混乱的状态。

所以max-age的相对时间更好些。Cache-Control除了max-age字段外还有一些其他字段，也比较常用。

no-cache：不使用本地缓存。强制请求服务端
no-store：禁止一切缓存。
public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。

协商缓存

特性：协商缓存主要由服务器判断这个缓存资源是否可用。
实现：浏览器初次请求资源时，服务端返回资源和资源标识ETag字符串，下次请求该资源时带上这个字符串，请求头键名为：If-None-Match,值为ETag标识。
过程：如果没命中强缓存，则判断是否有协商缓存，有的话使用它，它会向服务器发一个请求，如果资源没更改，返回 304 ，让浏览器读取本地缓存副本，如果资源发生修改，则返回修改后的资源。

它主要涉及到两个响应请求头：
Etag和If-None-Match
客户端在再次请求相同资源时，在请求头部中添加If-None-Match字段，值为上次获取资源时服务器返回的ETag值。
服务器在响应头部中添加ETag字段，表示资源的版本标识符。

区别

响应头

强：Cache-Control或Expires
协商：ETag和Last-Modified

资源获取方式

强：设置响应头控制客户端响应行为。
协商：与服务端交互判断是否要重新获取资源。

再次请求是否与服务端通信

强：不需要。
协商：需要通信。

先强缓存，如果没有强缓存，则协商缓存。