【学习记录】浏览器的缓存策略

iRainna
197 阅读5分钟

缓存策略

浏览器缓存是一种优化技术，通过将资源（如 HTML、CSS、JavaScript、图片等）存储在本地，减少重复请求和服务器负载，从而提升网页加载速度和用户体验。缓存策略的核心是决定哪些资源可以缓存、缓存多久以及何时更新缓存。

1. 缓存的作用

  1. 提升性能：减少网络请求，加快页面加载速度。
  2. 降低服务器负载：减少重复资源的请求，节省带宽。
  3. 离线访问：部分资源可以在离线状态下使用。

2. 缓存的类型

浏览器缓存主要分为以下几种类型：

2.1 强缓存（Strong Cache）

  • 特点：直接从本地缓存中读取资源，不发送请求到服务器。
  • 实现方式
    • Expires：指定资源的过期时间（绝对时间）。
    • Cache-Control：更灵活的缓存控制机制（相对时间）。

2.2 协商缓存（Conditional Cache）

  • 特点：向服务器发送请求，验证资源是否过期。如果未过期，服务器返回 304 状态码，浏览器使用本地缓存。
  • 实现方式
    • Last-Modified / If-Modified-Since：基于资源的最后修改时间。
    • ETag / If-None-Match：基于资源的唯一标识符。

3. 缓存的控制机制

浏览器缓存的控制主要通过 HTTP 头字段实现。以下是常见的缓存控制字段：

3.1 Expires

  • 作用：指定资源的过期时间（绝对时间）。

  • 示例

    Expires: Wed, 21 Oct 2023 07:28:00 GMT

  • 问题

    • 依赖客户端和服务端的时间同步。
    • 无法动态调整缓存时间。

3.2 Cache-Control

  • 作用：提供更灵活的缓存控制机制（相对时间）。

  • 常用指令

    • max-age=<seconds>：资源的最大缓存时间（秒）。
    • no-cache：强制协商缓存，每次请求都验证资源是否过期。
    • no-store：禁止缓存，每次请求都从服务器获取资源。
    • public：资源可以被任何中间节点（如 CDN）缓存。
    • private：资源只能被客户端缓存。

  • 示例

    Cache-Control: max-age=3600, public

3.3 Last-Modified / If-Modified-Since

  • 作用：基于资源的最后修改时间验证缓存。

  • 流程

    1. 服务器返回资源时，附带Last-Modified头字段。

      Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT

    2. 客户端再次请求时，附带If-Modified-Since头字段。

      If-Modified-Since: Wed, 21 Oct 2023 07:28:00 GMT

    3. 服务器检查资源是否修改：

      • 如果未修改，返回 304 状态码，客户端使用缓存。
      • 如果已修改，返回 200 状态码和新资源。

3.4 ETag / If-None-Match

  • 作用：基于资源的唯一标识符验证缓存。

  • 流程

    1. 服务器返回资源时，附带ETag头字段。

      ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

    2. 客户端再次请求时，附带If-None-Match头字段。

      If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

    3. 服务器检查资源是否修改：

      • 如果未修改，返回 304 状态码，客户端使用缓存。
      • 如果已修改，返回 200 状态码和新资源。

4. 缓存的工作流程

以下是浏览器缓存的工作流程：

  1. 首次请求：
    • 浏览器向服务器请求资源。
    • 服务器返回资源，并附带缓存控制头字段（如 Cache-Control、Expires、Last-Modified、ETag 等）。
    • 浏览器根据缓存控制头字段决定是否缓存资源。
  2. 后续请求：
    • 浏览器检查缓存是否有效：
      • 如果缓存有效（未过期），直接使用缓存（强缓存）。
      • 如果缓存无效（已过期），向服务器发送请求，验证资源是否修改（协商缓存）。
    • 服务器根据验证结果返回 304 或 200 状态码。

5. 缓存的更新机制

为了确保用户获取最新的资源，开发者需要合理设置缓存策略。以下是常见的缓存更新机制：

5.1 文件名哈希

  • 原理：在文件名中加入哈希值（如 main.a1b2c3d4.js），当文件内容变化时，哈希值也会变化。
  • 优点：强制浏览器获取新资源，同时保留旧资源的缓存。

5.2 版本号

  • 原理：在 URL 中加入版本号（如 main.js?v=1.0.0），当版本号变化时，强制浏览器获取新资源。
  • 优点：简单易用，适合小型项目。

5.3 手动清除缓存

  • 原理：通过修改服务器配置或手动清除缓存，强制浏览器获取新资源。
  • 优点：适用于紧急修复或特殊情况。

6. 缓存的注意事项

  1. 缓存时间：
    • 静态资源（如图片、CSS、JavaScript）可以设置较长的缓存时间。
    • 动态资源（如 HTML）应设置较短的缓存时间或不缓存。
  2. 缓存层级：
    • 浏览器缓存：存储在客户端本地。
    • 代理缓存：存储在中间节点（如 CDN）。
    • 服务器缓存：存储在服务器端。
  3. 缓存一致性：
    • 确保缓存策略的一致性，避免资源版本混乱。
  4. 缓存安全性：
    • 敏感资源（如用户数据）应禁止缓存或设置为私有缓存。

7. 总结

  • 浏览器缓存通过强缓存和协商缓存机制，提升网页加载速度和用户体验。
  • 缓存的控制主要通过 HTTP 头字段（如 Cache-Control、Expires、Last-Modified、ETag 等）实现。
  • 开发者需要合理设置缓存策略，确保资源的及时更新和一致性。
avatar
文章
阅读
粉丝