浏览器缓存策略

浏览器缓存策略主要有以下几种：

一、强缓存

  1. 原理：

    • 当浏览器访问资源时，会先检查强缓存。如果资源在强缓存中有效，浏览器直接从缓存中读取资源，不会向服务器发送请求。
    • 强缓存通过 HTTP 响应头中的 Cache-Control 和 Expires 字段来控制。

  2. Cache-Control：

    • 可以设置多种指令，如 max-age 指定资源的缓存时间（单位为秒）。
    • 例如，Cache-Control: max-age=3600 表示资源在 3600 秒内有效，可以直接从缓存中读取。
    • 其他指令还包括 no-cache（强制每次请求都向服务器验证资源是否更新）、no-store（不允许缓存资源）等。

  3. Expires：

    • 指定资源的过期时间，是一个绝对时间。
    • 例如，Expires: Thu, 31 Dec 2024 23:59:59 GMT 表示资源在这个时间点之前有效。
    • 但由于 Expires 是绝对时间，可能会受到客户端时间不准确的影响，所以现在更推荐使用 Cache-Control。

二、协商缓存

  1. 原理：

    • 当强缓存失效时，浏览器会向服务器发送请求，同时携带缓存的标识。服务器根据这些标识判断资源是否有更新。如果资源没有更新，服务器返回 304 Not Modified 状态码，浏览器继续从缓存中读取资源；如果资源有更新，服务器返回新的资源和新的缓存标识。
    • 协商缓存通过 HTTP 响应头中的 Last-Modified 和 If-Modified-Since 或者 ETag 和 If-None-Match 字段来实现。

  2. Last-Modified 和 If-Modified-Since：

    • Last-Modified 是服务器在响应资源时返回的资源最后修改时间。
    • 浏览器在下次请求时，会在 If-Modified-Since 请求头中携带上一次资源的 Last-Modified 值。
    • 服务器比较资源的最后修改时间和 If-Modified-Since 的值，如果相同则返回 304，否则返回新的资源和新的 Last-Modified 值。

  3. ETag 和 If-None-Match：

    • ETag 是服务器为资源生成的唯一标识，通常是基于资源内容生成的哈希值。
    • 浏览器在下次请求时，会在 If-None-Match 请求头中携带上一次资源的 ETag 值。
    • 服务器比较资源的 ETag 值和 If-None-Match 的值，如果相同则返回 304，否则返回新的资源和新的 ETag 值。

三、缓存的优先级

强缓存优先级高于协商缓存。如果强缓存有效，浏览器不会发送请求进行协商缓存。

四、实际应用中的注意事项

  1. 合理设置缓存时间：

    • 根据资源的更新频率和重要性，合理设置强缓存的 Cache-Control 或 Expires 值。对于经常更新的资源，可以设置较短的缓存时间；对于不常更新的资源，可以设置较长的缓存时间。
    • 例如，对于静态的 CSS、JavaScript 文件，可以设置较长的缓存时间，以提高页面加载速度；对于动态生成的内容，如 API 响应，可以设置较短的缓存时间或不使用强缓存。

  2. 动态更新缓存：

    • 如果资源的内容发生了变化，需要确保浏览器能够获取到新的资源而不是使用旧的缓存。可以通过在资源的 URL 中添加版本号、时间戳或随机数等方式来强制浏览器重新获取资源。
    • 例如，<link rel="stylesheet" href="style.css?v=1.0.1">，当更新 CSS 文件时，修改版本号可以让浏览器重新下载新的资源。

  3. 缓存控制的粒度：

    • 可以根据不同的资源类型和需求，设置不同的缓存策略。例如，可以对图片、字体等静态资源设置较长的缓存时间，对 HTML 页面设置较短的缓存时间，以便及时获取最新的页面内容。

  4. 考虑用户体验：

    • 在设置缓存策略时，要考虑用户体验。如果缓存时间过长，可能会导致用户在资源更新后无法及时看到新的内容。可以提供手动刷新或清除缓存的方式，让用户能够获取到最新的资源。