前端缓存深入剖析

客户端的缓存分为以下两种

• 1.利用本地存储,例如常用的localStorage,和sessionStorage
• 2.利用HTTP缓存策略，又分为强制缓存和协商缓存

HTTP缓存策略

HTTP缓存策略分为强制性缓存和协商缓存
强制性缓存策略是根据过期时间决定本地缓存还是请求新资源
协商缓存每次都会发出请求，经过服务器进行对比后决定采用本地缓存还是新资源
采用哪种缓存策略是由HTTP协议的header信息来决定的

1.Expires和max-age

Expires和max-age是强制缓存策略的信息，Expires是通过知名一个明确的时间点作为缓存资源的过期时间，在此时间点之前客户端将使用本地缓存的文件应答请求，不会向服务器发出请求。
但是Expires有一个致命的缺陷：它指定的时间点是以服务器为准的时间，但是客户端进行过期的判断时间是将本地的时间与此时间点对比的，如果客户端的时间与服务器存在误差，Expires控制的缓存资源失效。
但是我们可以在header加入Cache-control:max-age来指定缓存的时间跨度。

image.png

2.Etag和if-none-match

Etag是服务器为资源分配的唯一性标识，作为响应首部信息返回给浏览器。在浏览器的Cache-control指定的no-cache或者max-age和Expires均过期之后，将Etag值通过if-none-match作为请求header信息发送给服务器，服务器接收到请求之后，对比所请求资源的Etag值是否改变，如果没有改变讲返回304，如果资源发生了改变，则会返回最新的资源以及重新分配Etag值

image.png