强缓存和协商缓存详解

强缓存和协商缓存是浏览器缓存机制的两种核心方式，用于提升网页加载速度、减少服务器压力。

一、什么是强缓存（Strong Cache）

定义：

强缓存指的是：浏览器在 不向服务器发送请求 的前提下，直接从缓存中读取资源。

关键响应头：

示例：

Cache-Control: max-age=3600

表示该资源在被请求后的 1小时内有效，这段时间内，浏览器 不会再向服务器发请求，直接从缓存中取资源。

应用场景：

• 图片、CSS、JS 等静态资源（版本更新频率不高）
• 加载速度要求高的页面资源

二、什么是协商缓存（Negotiated Cache / Conditional Cache）

定义：

当资源过期时（强缓存失效），浏览器会向服务器发出请求，但带上缓存标识。服务器判断资源是否更新：

• 未更新 → 返回 304 Not Modified，使用本地缓存；
• 已更新 → 返回新的资源（200 OK 和新内容）。

关键字段：

请求头：

响应头：

示例流程：

1. 首次请求资源，响应头带：

ETag: "abc123"

2. 下一次请求资源，请求头带：

If-None-Match: "abc123"

3. 如果资源未变，服务器返回：

HTTP/1.1 304 Not Modified

浏览器用本地缓存。

应用场景：

• 资源可能会更新但频率较低
• 数据接口请求（如分页数据）
• JS、CSS 等有版本控制的资源

三、强缓存与协商缓存的优先级

浏览器会按以下顺序判断是否使用缓存：

1. 是否命中强缓存（如 Cache-Control）

   • 是 → 直接用缓存，不发请求

   • 否 → 进入协商缓存判断

2. 是否命中协商缓存（如 If-None-Match）

   • 是 → 返回 304，不下载资源，只发轻量请求

   • 否 → 返回 200，下载新资源

四、应用策略推荐

前端打包时推荐：

使用 Webpack/Vite 的 hash 文件名策略：

app.73ddfa.js

修改代码自动改变文件名，从而避免旧缓存（缓存穿透问题）。

五、如何查看缓存策略（以 Chrome 为例）

1. 打开 DevTools → Network

2. 刷新页面（建议勾选 “Disable cache” 测试后再取消）

3. 查看资源请求状态：

   • from memory cache：内存缓存
   • from disk cache：磁盘缓存
   • 200：正常请求
   • 304：协商缓存命中

六、总结对比表

七、内存缓存 vs 磁盘缓存 的区别

八、是否使用磁盘/内存缓存的判断依据

浏览器会根据以下因素决定资源是否放入 内存缓存 还是 磁盘缓存：

存入内存缓存的典型条件：

• 小文件（如小图标、小脚本）

• 生命周期短、频繁访问的资源

• 页面首次加载过程中的资源

• 当前标签页使用的资源

存入磁盘缓存的典型条件：

• 体积较大的资源（如视频、图片、JS/CSS）

• 设置了较长过期时间的资源（Cache-Control: max-age=xxx）

• 资源用于多个页面/标签页复用

• 非私密资源（非 Cache-Control: no-store）

九、与强缓存/协商缓存的关系

1. 强缓存会触发磁盘或内存缓存：

   • 浏览器决定使用强缓存后，会尝试从内存或磁盘读取缓存文件

   • 哪个缓存命中取决于：缓存位置 + 缓存是否仍在有效期

2. 协商缓存则总是会发请求，所以它不影响“是否存在哪种缓存”，但可能依赖磁盘缓存提供的文件副本以减少加载成本

示例：

Cache-Control: no-store

浏览器完全不会缓存（内存或磁盘都不会）

Cache-Control: public, max-age=86400

强缓存 1 天，浏览器倾向于将其 存入磁盘

总结