前端缓存策略

在前端开发中，合理的缓存策略能够显著提升网站的性能和响应速度，减少服务器负载。以下为你介绍常见的前端缓存策略。

1. 强缓存

强缓存通过设置 HTTP 头信息中的 Expires 和 Cache-Control 字段来控制，浏览器直接从本地缓存中读取资源，无需向服务器发送请求。

Expires

• 原理：Expires 是 HTTP 1.0 中定义的字段，它的值是一个绝对时间，代表资源的过期时间。当浏览器再次请求该资源时，会将当前时间与 Expires 进行比较，如果当前时间在 Expires 之前，则使用本地缓存，否则重新请求资源。
• 示例：

  Expires: Thu, 31 Dec 2025 23:59:59 GMT

  • 缺点：Expires 使用的是绝对时间，服务器和客户端的时间可能存在偏差，导致缓存判断不准确。

    Cache-Control

    • 原理：Cache-Control 是 HTTP 1.1 中定义的字段，用于更精确地控制缓存策略。它可以设置多个指令，如 max-age、no-cache、no-store 等。
    • 常用指令：
      • max-age：设置资源的相对缓存时间，单位为秒。例如：

        Cache-Control: max-age=3600

        表示资源在 3600 秒（1 小时）内有效，在此期间浏览器会直接使用本地缓存。

        • no-cache：表示需要先向服务器验证资源是否有更新，然后再决定是否使用缓存。
        • no-store：表示不使用缓存，每次请求都要从服务器获取最新资源。

          2. 协商缓存

          当强缓存失效时，浏览器会向服务器发送请求，通过对比资源的标识信息（如 ETag 和 Last-Modified）来判断资源是否有更新，如果没有更新则使用本地缓存，否则获取最新资源。

          Last-Modified 和 If-Modified-Since

          • 原理：
            • Last-Modified 是服务器在响应头中返回的资源最后修改时间。
            • 当浏览器再次请求该资源时，会在请求头中添加 If-Modified-Since 字段，其值为之前响应头中的 Last-Modified 值。
            • 服务器接收到请求后，会将 If-Modified-Since 与资源的当前最后修改时间进行比较，如果相同则返回 304 状态码，告知浏览器使用本地缓存；如果不同则返回新的资源和 200 状态码。
            • 示例：

              // 服务器响应头
              Last-Modified: Tue, 12 Apr 2024 10:30:00 GMT
              // 浏览器请求头
              If-Modified-Since: Tue, 12 Apr 2024 10:30:00 GMT

              ETag 和 If-None-Match

              • 原理：
                • ETag 是服务器为资源生成的唯一标识，通常是资源内容的哈希值。
                • 当浏览器再次请求该资源时，会在请求头中添加 If-None-Match 字段，其值为之前响应头中的 ETag 值。
                • 服务器接收到请求后，会将 If-None-Match 与资源的当前 ETag 进行比较，如果相同则返回 304 状态码，告知浏览器使用本地缓存；如果不同则返回新的资源和 200 状态码。
                • 示例：

                  // 服务器响应头
                  ETag: "123456789abcdef"
                  // 浏览器请求头
                  If-None-Match: "123456789abcdef"

                  • 优点：ETag 比 Last-Modified 更精确，因为即使资源的最后修改时间没有变化，但内容可能已经改变，ETag 可以检测到这种变化。

                    3. 本地存储缓存

                    除了 HTTP 缓存，还可以使用浏览器的本地存储（如 localStorage 和 sessionStorage）来缓存数据。

                    localStorage

                    通过合理运用这些缓存策略，可以有效提高网站的性能和用户体验。

                    • 特点：数据会长期存储在浏览器中，除非手动删除，否则不会过期。
                    • 示例：

                      // 存储数据
                      localStorage.setItem('userInfo', JSON.stringify({ name: 'John', age: 30 }));
                      // 获取数据
                      const userInfo = JSON.parse(localStorage.getItem('userInfo'));

                      4. 应用场景和策略选择

                    • 频繁更新的资源：如新闻内容、实时数据等，可设置较短的 max-age 或使用 no-cache 策略，确保用户能及时获取最新信息。
                    • 不常更新的资源：如图片、CSS、JavaScript 文件等，可设置较长的 max-age，减少服务器请求。
                    • 用户特定数据：可使用本地存储缓存，避免重复请求服务器。
                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）
                    
                    （图片来源网络，侵删）