强缓存、协商缓存

强缓存

客户端第一次向服务器请求资源时，服务器返回某个资源的同时，添加某些头部信息，告诉客户端将资源保存在本地，并在未来的某个时点之前再次请求这个资源时，直接从本地获取就可以了。

【字段控制】

• Expires： 代表缓存资源的过期时间，一个绝对时间的GMT格式的时间字符串

浏览器再次请求这个资源时，会先从缓存中找到这个资源，然后获取Expires时间与当前的请求时间比较，如果Expires时间比当前浏览器的请求时间晚，说明缓存未过期，即命中缓存；

【比较】资源的 Expires 值 与 当前的请求时间

缺点：服务器返回的Expires时点是服务器上的时间，可能与客户端有时间差，时间差太大时可能造成缓存混乱。

• Cache-Control：max-age 缓存资源的最大生命周期

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

【比较】资源的date 值 、max-age 与 当前的请求时间

Cache-Control描述的是相对时间，采用本地时间来计算资源的有效期，所以相比Expires更可靠。

---

【优先级】 如果同时出现，max-age 优先级比较高

【特点】不向服务器发出请求，由客户端判断

协商缓存

客户端第一次问服务器请求某个资源时，服务器返回请求资源的同时，将该资源的一些信息（文件摘要、或者最后修改时间）也返回给客户端，告诉客户端将这个资源缓存在本地。当客户端下一次需要这个资源时，将请求以及相关信息（文件摘要、或者最后修改时间）一并发送给服务器，由服务器来判断客户端缓存的资源是否需要更新：如不需要更新，就直接告诉客户端获取本地缓存资源；如需要更新，则将最新的资源连同相应的信息一并返回给客户端。当强缓存未命中时，浏览器就会发送请求到服务器，服务器会验证协商缓存是否命中，如果协商缓存命中，请求返回的http状态为304，并会显示说明Not Modified，浏览器收到该返回后，就会从缓存中加载了。

【字段控制】

• If-Modified-Since & Last-Modified

Last-Modified为实体首部字段，值为资源最后更新时间，随服务器response返回。

If-Modified-Since为请求首部字段，通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存，浏览器从缓存中获取资源；如果有过修改，则服务器返回资源，同时返回新的Last-Modified时间。

【steps】

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

2)当浏览器再次请求该资源时，会在request headers中加上If-Modified-Since，这个值即为上一次服务器返回的Last-Modified时间；

3)服务器再次收到资源请求时，将If-Modified-Since时间和资源在服务器上的最后修改时间与对比，如果If-Modifid-Since与最后修改时间一致，则命中缓存，服务器返回304，浏览器从缓存中获取资源；若未命中缓存，服务器返回资源同时，浏览器缓存资源的Last-Modified会被更新。

【比较】 If-Modified-Since时间 与 服务器上的 Last-Modified时间

• If-None-Match & ETag

ETag为实体头部字段，表示资源内容的唯一标识，随服务器response返回；

If-None-Match为请求头部字段，服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存，浏览器从缓存中获取资源；如果有过修改，则服务器返回资源，同时返回新的ETag。

【steps】

1) 服务器第一次收到浏览器发出的资源请求时，会在response
headers中加上ETag，这个ETag是根据该资源生成的唯一标识，这个唯一标识是个字符串，只要服务器认为资源有变化且应该提供新的资源，则ETag就必须有变化。浏览器将资源连同ETag一并缓存。

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

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

【比较】 If-None-Match 值 与请求的资源重新计算生成相应的ETag

【为什么要有Etag】

1) 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；

2) 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

3) 某些服务器不能精确的得到文件的最后修改时间。

---

【优先级】 Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

【特点】都要向服务器发起一次请求

整理自： https://juejin.im/post/5b0ea4f1518825155d66a97b?utm_source=tuicool&utm_medium=referral