🧠 浏览器缓存机制笔记

✍️ 作者：桑榆
🕓 更新时间：2025-11-04
🧠 关键词：浏览器缓存、缓存策略、HTTP 缓存头

一、什么是浏览器缓存

浏览器缓存（Browser Cache） 是浏览器为了提升访问速度、节省带宽，将网页资源（HTML、CSS、JS、图片等）临时保存在本地的机制。

核心思想：
当再次访问相同资源时，浏览器优先使用本地缓存，而非重新下载。

二、缓存类型分类

浏览器缓存分为两大类：

类型	是否与服务器通信	缓存依据	描述
强缓存（强制缓存）	❌ 否	Expires / Cache-Control	直接使用本地缓存，不向服务器请求。
协商缓存（对比缓存）	✅ 是	Last-Modified / ETag	向服务器验证资源是否更新，未更新返回 304。

三、强缓存（Forced Cache）

🧩 工作原理

1. 浏览器第一次访问资源，服务器返回资源和缓存控制字段；
2. 在缓存有效期内，浏览器直接使用本地副本；
3. 超过有效期后才重新向服务器请求。

⚙️ 关键响应头

字段	说明	示例
Expires	资源过期的绝对时间（依赖客户端时间）	Expires: Wed, 21 Oct 2025 07:28:00 GMT
Cache-Control	控制缓存的相对时间与策略（优先级高）	Cache-Control: max-age=3600

Cache-Control 常见值

指令	含义
max-age=秒数	设置资源缓存有效期（单位秒）
no-cache	强制走协商缓存
no-store	禁止缓存
public	允许中间代理缓存
private	仅浏览器缓存，不允许代理缓存
immutable	表示资源永不变（可直接使用缓存）

---

四、协商缓存（Negotiated Cache）

🧩 工作原理

1. 强缓存过期后，浏览器向服务器发送请求；
2. 请求头带上资源标识（时间或 ETag）；
3. 若资源未变化，服务器返回 304 Not Modified，浏览器使用本地缓存；
4. 若已更新，则返回新资源和状态码 200 OK。

⚙️ 关键字段

请求头	响应头	含义
If-Modified-Since	Last-Modified	根据文件修改时间判断
If-None-Match	ETag	根据文件唯一标识判断

⚖️ 优先级

ETag / If-None-Match 的优先级高于 Last-Modified / If-Modified-Since。
因为 ETag 基于内容哈希，更精确。

五、缓存优先级与流程图

        ┌────────────┐
        │ 强缓存有效？│
        └───────┬────┘
                │是
                ▼
         本地缓存直接使用
                │否
                ▼
        ┌────────────┐
        │ 协商缓存命中？│
        └───────┬────┘
                │是
                ▼
          返回 304，使用本地缓存
                │否
                ▼
          返回 200，新资源缓存

六、缓存位置分类

缓存类型	存储位置	生命周期	特点
内存缓存 (Memory Cache)	RAM	浏览器标签页关闭即清除	访问最快
磁盘缓存 (Disk Cache)	磁盘文件	可长期保留	访问稍慢，容量大
Service Worker Cache	独立线程管理	可离线访问	可自定义缓存逻辑
Push Cache (HTTP/2)	临时缓存	同一会话内有效	一次性缓存

---

七、缓存策略组合建议

场景	推荐配置
静态资源（CSS/JS/图片）	Cache-Control: max-age=31536000, immutable
动态接口数据	Cache-Control: no-cache
HTML 文件	Cache-Control: no-cache
敏感数据	Cache-Control: no-store

---

八、常见状态码

状态码	含义
200 OK	从服务器返回新内容
200 (from disk cache)	从磁盘缓存读取
200 (from memory cache)	从内存缓存读取
304 Not Modified	协商缓存命中，无需重新下载

---