跳到主要内容

强制缓存与协商缓存 🔥

优点：​

  • 减少请求，节省带宽流量。
  • 降低服务器压力。
  • 加快响应速度，提升用户体验。

使用​

强制缓存；服务器设置以下标头:

Cache-Control:max-age=3600
或者
Expires: Tue, 28 Feb 2022 22:22:22 GMT（系统时钟格林时间有偏移会导致错乱问题，推荐用max-age）

如果同时存在， Cache-Control 优先级高于 Expires 。

协商缓存；服务器设置以下标头:

ETag: W/"6d9930e83bbb43"
或者
Last-Modified:Tue, 28 Feb 2022 22:22:22 GMT

理论原理：​

  1. 强制缓存：

Cache-Control 这个字段是 http 1.1 的规范。

服务器设置 Response Headers 属性，添加Cache-Control:max-age=3600，同时会带上 Date 字段，资源缓存的有效期是 3600 秒。有效期内浏览器不会发出请求。

Expires 这个字段是 http 1.0 的规范。

服务器设置 Response Headers 属性，添加Expires:Mon,18 Oct 2066 23:59:59 GMT，这个 GMT 时间代表资源失效的时间，如果当前的时间戳内，有效期内浏览器不会发出请求。

  1. 协商缓存：

服务器设置 Response Headers 属性，添加 Etag 资源生成的唯一标识串，下一次请求时， 请求头自动带上 If-None-Match 就是 Etag 值。服务器比较值，如果未变返回 304，否则返回新资源。

服务器设置 Response Headers 属性，添加 Last-Modified 标记最后文件修改时间，下一次请求时，请求头中自动带上 If-Modified-Since 值就是 Last-Modified 的值，在服务器上根据文件的最后修改时间判断资源是否有变化，如果未变返回 304，否则返回新资源。

优先级：Cache-Control  > expires > Etag > Last-Modified

其他 Cache-Control​

标准的
Cache-Control: immutable（指令可用于明确指示不需要重新验证）
Cache-Control: no-cache
兼容过时的实现
Cache-Control: no-store, no-cache, max-age=0, must-revalidate, proxy-revalidate

::: info 提示 请求头的是否带有参数 If-Modified-Since，受（ Cache-Control 配置影响） :::

参考链接​

MDN 官网：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching