浏览器缓存

浏览器缓存可按存储机制和缓存策略分为多种类型，不同类型有明确的优先级和配置标识。以下是详细分类及特性：

一、按存储机制划分（核心缓存类型）

1. Memory Cache（内存缓存）

• 特点：存储在内存中，读取速度最快，但生命周期短（关闭标签页即失效），通常缓存临时、小体积资源（如 CSS、JS、小型图片）。
• 优先级：最高（浏览器优先从内存读取最近使用的资源）。
• 配置标识：无主动配置方式，由浏览器自动管理（基于访问频率和资源大小）。

2. Disk Cache（磁盘缓存）

• 特点：存储在本地磁盘，读取速度慢于内存但持久化（关闭浏览器仍保留），可缓存大体积资源（如图片、视频）。
• 优先级：次高（内存缓存未命中时查找磁盘缓存）。
• 配置标识：由 HTTP 响应头的缓存策略字段控制（见下文 “强缓存 / 协商缓存”）。

3. Service Worker Cache（服务工作线程缓存）

• 特点：由开发者通过 Service Worker 脚本手动控制，支持离线访问，可缓存任意资源（属于 PWA 核心特性）。
• 优先级：中等（介于内存 / 磁盘缓存与网络请求之间）。
• 配置标识：无原生 HTTP 头配置，需通过代码控制（如cache.addAll()缓存资源，fetch事件拦截请求）。

4. Push Cache（推送缓存）

• 特点：仅存在于 HTTP/2，由服务器主动推送资源（如 HTML 解析时提前推送 CSS），生命周期极短（会话结束即失效）。
• 优先级：较低（作为最后一道缓存防线）。
• 配置标识：通过 HTTP/2 的Push帧控制，无特定响应头。

二、按缓存策略划分（HTTP 协议控制的缓存）

1. 强缓存（强制缓存）

• 原理：资源未过期时，浏览器直接从缓存读取，不发送请求到服务器。

• 优先级：高于协商缓存（优先判断强缓存是否生效）。

• 配置标识（响应头） ：

  • Cache-Control（HTTP/1.1，优先级最高）：

    • max-age=3600：资源有效期 3600 秒（从请求时间开始计算）。
    • no-cache：不使用强缓存，需走协商缓存。
    • no-store：完全不缓存资源（跳过所有缓存）。
    • public：允许中间代理（如 CDN）缓存。
    • private：仅客户端可缓存（默认）。

  • Expires（HTTP/1.0）：指定绝对过期时间（如Expires: Wed, 21 Oct 2025 08:00:00 GMT），优先级低于Cache-Control。

2. 协商缓存（对比缓存）

• 原理：强缓存失效后，浏览器发送请求到服务器，由服务器判断是否使用缓存。

• 优先级：低于强缓存，高于网络请求。

• 配置标识（请求头 + 响应头） ：

  • 第一次请求（服务器返回） ：

    • Last-Modified：资源最后修改的时间戳（如Last-Modified: Tue, 15 Nov 2022 12:00:00 GMT）。
    • ETag：资源内容的唯一哈希标识（如ETag: "abc123"）。

  • 后续请求（客户端发送） ：

    • If-Modified-Since：携带上次的Last-Modified值，验证资源是否修改。
    • If-None-Match：携带上次的ETag值，验证内容是否变化（优先级高于If-Modified-Since）。

  • 服务器响应：

    • 资源未修改：返回304 Not Modified，浏览器使用缓存。
    • 资源已修改：返回新资源（200 OK）。

三、缓存查找优先级顺序

当浏览器请求资源时，缓存查找流程如下：

1. Memory Cache → 2. Service Worker Cache → 3. Disk Cache → 4. Push Cache → 5. 协商缓存（请求服务器）  → 6. 网络请求（拉取新资源）

四、总结

缓存类型	存储位置	优先级	核心配置标识	典型场景
Memory Cache	内存	1	无（浏览器自动管理）	临时缓存刚访问的小型资源
Disk Cache	磁盘	2	Cache-Control、Expires	持久化缓存图片、CSS、JS
Service Worker Cache	磁盘	3	代码控制（cache API）	PWA 离线访问、自定义缓存逻辑
Push Cache	内存	4	HTTP/2 Push帧	服务器主动推送的预加载资源
强缓存	磁盘 / 内存	高	Cache-Control、Expires	静态资源（长期不变的文件）
协商缓存	磁盘 / 内存	中	ETag/If-None-Match、Last-Modified/If-Modified-Since	频繁更新的资源

理解这些缓存类型和优先级，有助于通过合理配置 HTTP 头或代码，优化资源加载速度和缓存有效性。