前端缓存机制

一.前端缓存概述

前端缓存技术是提高前端性能，降低服务端压力的关键技术。前端缓存技术分为“强制缓存”与“协商缓存”；两种缓存的相同点是命中后在内容都是从浏览器的缓存中取数据，不同点是“强制缓存”的命中与否判断是浏览器根据Expires字段或Cache-control字段自行判断的，而“协商缓存”是浏览器每次请求都将If-modified-since字段或If-No-Match字段带入协议头并发送到服务端，由服务端判断浏览器缓存的资源是否有变化，如无变化就返回304（no-modified）。

二.强制缓存

在http 1.0 阶段使用Expires字段来标识强制缓存， 浏览器第一次向服务端请求资源后，服务端在返回头中携带Expires字段来标识资源最终的过期时间，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT。浏览器第二次请求该资源时，浏览器会先从缓存中寻找该资源，发现该资源未过期就直接加载该资源，不再向服务端发送请求。这个字段的弊端是，服务端的GMT时间与浏览器的时间比一定匹配，当修改浏览器的时间后就会造成缓存命中异常。

---

`Cache-Control `在http 1.1 后引入，用来补充Expires字段的不足。浏览器第一次向服务请求资源后，服务端会在返回头中带入Cache-Control字段，控制浏览器的缓存，Cache-Control字段的取值有no-store(不缓存)，no-cache(每次询问)，max-age: 120(资源过期时间120s)。在浏览器第二次请求该资源时，首先会从缓存中寻找该资源，找到后会结合资源上次的请求返回时间+max-age来判断资源是否过期，不过期直接使用，如果过期就继续向服务端请求资源，服务端接到请求后会将资源返回并携带新的max-age。

---

强制缓存主要用于静态资源，因为强制缓存命中逻辑全部在浏览器，当动态资源（html、js、css）有变动后，无法主动使浏览器更新文件。

三.协商缓存

当浏览器没有命中强制缓存后，浏览器会向服务端发送请求验证协商缓存。服务端验证资源命中协商缓存后会返回304（Not Modified）并不返回资源的内容，浏览器此时会更新缓存状态并使用缓存中的资源。
协商缓存使用两个字段标识：Etag和Last-Modified。
1. Etag是服务端在响应头中所带，值是一段浏览器无法识别的字符串，在浏览器第二次请求资源时将这个的值以If-No-Match字段带入请求头，服务端接到If-No-Match值与资源新生成的Etag值进行对比，如果资源无变化就返回304（Not Modified），如果有变化就返回新的资源和新的Etag。
2. Last-Modified是服务端随资源返回，Last-Modified是一个服务端的GTM值，浏览器二次请求资源时将此字段的值以If-Modified-Since字段带回给服务端，服务端拿到这个值后对边资源的变更时间，如果相同就说明资源无变化，返回304（Not Modified）；如果不同就返回新的资源和对应资源的Last-Modified值。

---

参考：https://mp.weixin.qq.com/s?__...