[!info] related notes

• 所属 MOC: 前端八股文 MOC, HTTP 与前端网络 MOC, 浏览器缓存体系
• 相关知识: 强缓存, 协商缓存, [[http-cache-storage|浏览器内部缓存存储]], Vary 与缓存键, Age、Date 与新鲜度计算, 缓存失效与部署策略, CDN 边缘缓存, BFCache 页面级缓存, Service Worker 与 Cache API, 浏览器渲染流程, 关键渲染路径

浏览器缓存有哪些，304 / memory cache / disk cache 分别是什么

这道题有两个层面：一是缓存策略（强缓存 vs 协商缓存），二是缓存存储位置（memory cache vs disk cache）。面试时不要混着说。

一句话回答

浏览器缓存按策略分强缓存和协商缓存，按存储位置分 memory cache（内存缓存）和 disk cache（磁盘缓存）。304 是协商缓存命中时的响应状态码，表示资源未修改，继续使用本地副本。

第一层：按缓存策略分

强缓存

浏览器直接使用本地副本，不发请求到服务器。

• 控制头：Cache-Control: max-age=3600、Expires
• DevTools 中显示为 200 (memory cache) 或 200 (disk cache)
• 状态码：200 OK (from cache)
• 共享缓存（CDN）可用 s-maxage 设置独立 TTL → CDN 边缘缓存

协商缓存

浏览器发请求到服务器，让服务器判断资源是否变化。

• 控制头：ETag / If-None-Match、Last-Modified / If-Modified-Since
• 资源未变：服务器返回 304 Not Modified，浏览器使用本地副本
• 资源已变：服务器返回 200 OK + 新内容
• 缓存键还包括 Vary 头部指定的请求头 → Vary 与缓存键

第二层：按缓存存储位置分

memory cache（内存缓存）

• 存储在内存中，读取速度最快
• 生命周期短，关闭标签页或进程后清空
• 通常缓存当前页面正在使用的资源（如图片、脚本片段）
• DevTools 中显示为 200 (memory cache)

disk cache（磁盘缓存）

• 存储在硬盘中，读取速度比内存慢，但比网络快
• 生命周期长，关闭浏览器后仍然保留
• 容量大，适合缓存不常变的大文件（如图片、字体、视频）
• DevTools 中显示为 200 (disk cache)

两者的区别

维度	memory cache	disk cache
存储位置	内存	硬盘
读取速度	最快	较快（比网络快）
生命周期	标签页/进程关闭后清空	持久化，关闭浏览器仍保留
容量	较小	较大
浏览器选择策略	当前页面活跃资源	不常访问但值得缓存的资源

304 Not Modified 是什么

304 是 HTTP 状态码，表示协商缓存命中。

流程：

1. 浏览器首次请求资源，服务器返回资源 + ETag 或 Last-Modified
2. 浏览器将资源存入 disk cache
3. 再次请求时，浏览器带上 If-None-Match 或 If-Modified-Since
4. 服务器对比后发现资源未变，返回 304（无响应体）
5. 浏览器从 disk cache 读取资源使用

关键点：

• 304 响应没有响应体，只有响应头，所以传输量极小
• 它不是强缓存，而是协商缓存的结果
• DevTools 中显示为 304 Not Modified
• 304 响应可以更新缓存头（如新的 Cache-Control）

浏览器缓存的常见分层

按浏览器检查缓存的顺序，优先级从高到低：

1. Service Worker Cache → 可编程，PWA 离线能力
2. Memory Cache → 内存缓存，当前页面活跃资源
3. Disk Cache → 磁盘缓存，持久化资源

如果以上都没有命中，才会发起网络请求，进入协商缓存判断。

早期资料里常会提到 HTTP/2 Push Cache，但它已不是当前浏览器缓存体系里的主流层级。

面试回答模板

浏览器缓存按策略分强缓存和协商缓存。强缓存不发请求，直接用本地副本，状态码是 200 from cache；协商缓存会发请求让服务器确认，资源没变就返回 304，变了就返回 200 和新内容。

按存储位置分 memory cache 和 disk cache。memory cache 在内存里，速度最快但关掉标签页就没了；disk cache 在硬盘上，持久化但读取稍慢。浏览器会根据资源类型和访问频率自动决定存到哪。

304 就是协商缓存命中时服务器返回的状态码，告诉浏览器资源没变，继续用本地副本。现代前端用内容哈希文件名配合长期缓存实现最佳性能。

常见误解

• “304 是强缓存” -> 错误，304 是协商缓存的结果，说明发了请求
• “memory cache 比 disk cache 优先级低” -> 错误，memory cache 优先级更高
• “disk cache 关了浏览器就没了” -> 错误，disk cache 是持久化的
• “Cache-Control 能控制存在 memory 还是 disk” -> 不能完全控制，浏览器自行决定
• “Cache-Control: no-cache 是不缓存” -> 错误，它是”可以缓存但用前必须验证”，真正的不缓存是 no-store
• “CDN 缓存和浏览器缓存用同一套规则” -> 不一定，CDN 可以用 s-maxage、CDN-Cache-Control 或自己的 purge API

最小示意

首次请求:
  浏览器 -> GET /app.js -> 服务器
  服务器 -> 200 OK + Cache-Control: max-age=86400 + ETag: "abc123"
  浏览器 -> 存到 disk cache

第二次请求（强缓存命中）:
  浏览器 -> 直接从 disk cache 读取 -> 200 (disk cache)

第三次请求（强缓存过期，协商缓存命中）:
  浏览器 -> GET /app.js + If-None-Match: "abc123" -> 服务器
  服务器 -> 304 Not Modified（资源没变）
  浏览器 -> 从 disk cache 读取

第四次请求（关闭浏览器后重新打开，disk cache 仍在）:
  浏览器 -> 检查 disk cache -> 如果强缓存仍有效 -> 200 (disk cache)

Related notes

• 浏览器缓存体系
• CDN 边缘缓存
• 缓存失效与部署策略