常见的前端缓存类型

时之世 发布于 3 天前 71 次阅读 预计阅读时间: 6 分钟 最后更新于 3 天前 1327 字 无~

在前端开发中，缓存是提高应用性能的重要手段之一。通过缓存，可以减少网络请求次数，加快页面加载速度，并提升用户体验。以下是几种常见的前端缓存类型：

1. 浏览器缓存 （HTTP 缓存）

在前端开发中，缓存机制是提升应用性能的关键因素之一。它主要分为两大类：强缓存和协商缓存。下面我们详细讲解这两种缓存机制的工作原理及其相关的 HTTP 头部信息。

强缓存

强缓存是指当资源在客户端的缓存中且未过期时，浏览器会直接使用该缓存而不会发起任何网络请求。这通过设置 HTTP 响应头中的 Cache-Control 和/或 Expires 来实现。

  • Cache-Control
  • 这是一个通用的消息头，用于指定请求和响应遵循的缓存机制。
  • 常见的指令包括：
    • max-age=<seconds>: 指定资源被认为新鲜的最大时间 （秒） 。
    • no-cache: 表示客户端必须向服务器验证缓存的有效性，但可以继续使用缓存直到得到响应。
    • no-store: 禁止缓存任何版本的响应。
    • public: 标识响应可以被任何缓存存储。
    • private: 指定响应仅对单个用户有效，不能被共享缓存存储。
  • Expires
  • 给出一个具体的过期时间，在此之前资源被认为是有效的。格式为 HTTP 日期格式。
  • 如果同时存在 Cache-Control 和 Expires，则 Cache-Control 优先级更高。

示例

Cache-Control: max-age=3600
Expires: Wed, 21 Oct 2025 07:28:00 GMT

这意味着资源将在接下来的一小时内被视为有效 （根据 max-age），或者直到指定的过期时间到达。

协商缓存

当强缓存失效时，会尝试进行协商缓存。这是指客户端与服务器沟通以确定是否需要重新获取资源。这通常涉及到以下两个 HTTP 头部字段：

  • ETag
  • 由服务器提供，作为资源的一个唯一标识符。即使内容没有改变，只要资源有任何更新，ETag 也应该随之变化。
  • 客户端会在后续请求中发送 If-None-Match 头部，包含上一次收到的 ETag 值。如果服务器上的资源没有变化，将返回 304 Not Modified 状态码，允许客户端继续使用本地缓存。
  • Last-Modified / If-Modified-Since
  • Last-Modified 指出资源最后一次修改的时间。
  • 在下一次请求中，客户端会带上 If-Modified-Since 头部，其值为上次响应中的 Last-Modified 值。若资源自那时以来未更改，服务器将返回 304 状态码；否则，返回新的资源和状态码 200 。

示例

ETag: "abc123"
Last-Modified: Mon, 20 Apr 2025 07:28:00 GMT

在随后的请求中：

If-None-Match: "abc123"
If-Modified-Since: Mon, 20 Apr 2025 07:28:00 GMT

如果资源没有变化，服务器将返回 304 状态码，并可能附带新的 ETag 或 Last-Modified 头部，指示客户端可以安全地使用其缓存。

总结

  • 强缓存避免了不必要的网络请求，提高了加载速度。
  • 协商缓存虽然会产生少量的网络通信，但它确保了客户端始终拥有最新的数据。

2. Service Worker 缓存

  • Service Worker 是一种可编程的网络代理，允许开发者拦截并处理网络请求，包括管理缓存逻辑。它能够在不依赖于网络的情况下提供内容，非常适合构建离线优先的应用程序。
  • 使用 Service Worker，你可以自定义缓存策略，比如先从缓存读取，若不存在则发起网络请求；或者在网络请求成功后更新缓存等。

3. LocalStorage 和 SessionStorage

  • LocalStorage: 提供了一种持久化的存储方式，数据没有过期时间，除非用户手动清除浏览器缓存或通过代码删除。
  • SessionStorage: 数据仅在当前会话期间有效，关闭标签页或浏览器窗口后数据会被清除。两者都可用于存储非敏感的数据，如用户偏好设置。

4. IndexedDB

  • IndexedDB 是一种底层的数据库系统，允许存储大量结构化数据，支持事务操作。相比 LocalStorage，它可以存储更复杂的数据类型 （如文件/ blob） 。适用于需要高效查询和管理大量数据的场景。

5. Application Cache (已废弃)

  • 应用缓存 （AppCache） 曾经被用来指定哪些资源应该被缓存并在离线时可用。但由于其诸多限制和问题，W3C 已经将其标记为废弃状态，推荐使用 Service Workers 替代。

6. 内存缓存

  • 浏览器还会将一些资源暂时保存在内存中，以便快速访问。这类缓存通常没有明确的 API 接口进行操作，而是由浏览器自动管理。例如，对于图片等静态资源，浏览器可能会在内存中保留一份副本以加速渲染。