关于前端:前端缓存机制

一. 前端缓存概述

 前端缓存技术是进步前端性能，升高服务端压力的关键技术。前端缓存技术分为“强制缓存”与“协商缓存”；两种缓存的相同点是命中后在内容都是从浏览器的缓存中取数据，不同点是“强制缓存”的命中与否判断是浏览器依据 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?__…