共计 1383 个字符，预计需要花费 4 分钟才能阅读完成。
背景
浏览器缓存是 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 跟之前的没有变动。
