背景

浏览器缓存是Web利用性能优化的一个重要环节，应用缓存能够缩小浏览器向服务器申请资源的次数，从而放慢客户端加载网页的速度，减小服务器压力

浏览器缓存分类

浏览器缓存策略次要有两种：强缓存和协商缓存。

浏览器在给服务器发送第一次申请后，再发送后续申请时，会先读取上一次返回header中的信息

  • 强缓存：返回的header中的expires、cache-control字段命中强缓存，则下一次发申请时间接从缓存中返回，不与服务器通信
  • 协商缓存：如果header中没有命中强缓存的信息，浏览器发送携带header信息的申请到服务端，由服务端判断是否命中协商缓存，如果命中则服务器返回新的响应header信息更新缓存中的对应header信息，然而并不返回资源内容，它会告知浏览器能够间接从缓存获取；否则返回最新的资源内容

强缓存是在本地判断缓存是否过期，没有与服务端交互，取得到的缓存也是本地的内容。

协商缓存是通过发送本地缓存的header信息到服务端，由服务端判断header信息中缓存是否过期，如果没过期客户端依然应用本地缓存，如果过期服务端返回新的资源。

强缓存

强缓存通过header头部信息中的expires和cache-control字段判断是否过期。

  • expires字段示意缓存过期工夫，是服务端返回的相对工夫，GTM格局（咱们用的GTM+8，隔8个小时），会存在服务器与客户端工夫偏差导致缓存凌乱的问题。逐步被 cache-control代替
  • cache-control字段通过max-age来设置缓存持续时间

以下是几个cache-control相干字段及其含意

字段含意
no-cache告知浏览器不间接应用本地缓存，要先向服务器发动申请
no-store禁止浏览器缓存资源，每次都要向服务器申请资源，每次申请都会下载残缺的资源
max-age缓存资源的无效工夫，从浏览器第一次发申请的工夫算起
public能够被所有用户缓存，包含浏览器或代理
private仅容许客户端浏览器缓存，不容许CDN等两头代理缓存

协商缓存

服务端判断申请是否命中协商缓存的时候，须要应用到 Last-Modified 或者 Etag 字段，Last-Modified基于批改工夫，Etag基于文件内容

浏览器第一次申请一个资源的时候，服务器返回的header中会加上Last-Modify，标识该资源的最初批改GTM相对工夫，例如 Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。
当浏览器再次申请该资源时，request的申请头中会蕴含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，依据资源的最初批改工夫判断是否命中缓存。

如果命中缓存，则返回304 Not Modified，并且不会返回资源内容，并且不会返回Last-Modify。

Etag/If-None-Match返回一个校验码。ETag能够保障每一个资源是惟一的，资源变动都会导致ETag变动。服务器依据浏览器上送的If-None-Match值来判断是否命中缓存。

与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，因为ETag从新生成过，response header中还会把这个ETag返回，即便这个ETag跟之前的没有变动。