浏览器缓存策略
浏览器请求资源时的缓存策略核心是：默认优先查缓存（所有资源都遵循，不止图片），是否重新获取取决于「缓存规则（HTTP 头）」和「刷新方式」 —— 图片、JS、CSS、字体等静态资源缓存命中概率高（因为更新频率低），而 HTML、接口数据等动态资源缓存策略更严格，但本质都遵循同一套缓存逻辑。
下面分两部分讲清楚：先回答 “什么时候优先查缓存”，再重点解决 “刷新页面时是否用缓存”。
一、什么时候浏览器会首先访问缓存？（核心规则）
浏览器对所有资源（图片、JS、CSS、HTML、接口等） 都会优先查缓存，除非触发 “强制不缓存” 条件。关键判断逻辑是：
- 资源是否被缓存过：浏览器首次请求资源时，会把资源和对应的「缓存规则」（HTTP 响应头）存在本地（内存缓存 / 磁盘缓存）；后续请求时，先检查本地是否有缓存。
- 缓存是否有效：根据缓存规则判断缓存是否 “过期”，若未过期则直接用缓存（不发网络请求），若过期则发起 “验证请求”（问服务器资源是否更新）。
关键缓存规则（HTTP 头）：决定是否优先用缓存
- 强缓存（优先级最高）：响应头带
Cache-Control: max-age=3600（资源 1 小时内有效）或Expires: 未来时间，浏览器直接用缓存，不发任何网络请求（控制台显示200 OK (from disk cache)或from memory cache）。- 适用场景：图片、JS、CSS 等静态资源（打包时加哈希值，更新时哈希变，自动失效）。
- 协商缓存：响应头带
Last-Modified: 文件最后修改时间或ETag: 文件唯一标识，缓存过期后，浏览器发请求带If-Modified-Since或If-None-Match问服务器：“资源变了吗？”- 服务器说 “没变化”（响应
304 Not Modified）：浏览器用缓存； - 服务器说 “变了”（响应
200 OK带新资源）：更新缓存并使用新资源。 - 适用场景：HTML、频繁更新的接口数据。
- 服务器说 “没变化”（响应
- 不缓存：响应头带
Cache-Control: no-cache（每次都发协商请求）或Cache-Control: no-store（不存缓存，每次都重新下载）。- 适用场景：登录状态、实时数据（如股票行情）。
结论：
- 只要资源被缓存过且缓存有效，浏览器一定优先用缓存（不管资源类型是图片还是 JS）；
- 图片等静态资源常用「强缓存」，所以看起来 “总是读缓存”；而 HTML 常用「协商缓存」，所以刷新时可能会发验证请求，但不一定重新下载。
二、刷新页面时，是访问缓存还是重新获取？（分 3 种刷新方式）
这是最容易混淆的点：不同刷新方式会改变缓存策略，核心区别是 “是否忽略强缓存”。
先明确 3 种常见刷新操作（以 Chrome 为例）：
| 刷新方式 | 操作方式 | 缓存策略（核心：是否忽略强缓存） | 实际表现（以图片 / JS 为例） |
|---|---|---|---|
| 正常刷新（普通访问） | 点击地址栏回车、点链接跳转 | 不忽略强缓存，遵循原有缓存规则 | 缓存未过期：用缓存（200 from cache）；过期：发协商请求 |
| 手动刷新（刷新按钮 / F5） | 点击刷新图标、按 F5 | 忽略强缓存，直接走协商缓存 | 不管强缓存是否过期，都发验证请求（304 或 200） |
| 强制刷新（Ctrl+F5） | 按住 Ctrl+F5、Ctrl+Shift+R | 忽略所有缓存（强缓存 + 协商缓存） | 每次都重新下载资源（响应 200 OK，不读本地缓存） |
举个具体例子（图片资源，强缓存 max-age=3600）：
- 首次访问：下载图片，缓存到本地（磁盘）；
- 10 分钟后正常刷新（地址栏回车）：强缓存未过期，直接用缓存（不发网络请求）；
- 2 小时后手动刷新（F5）：强缓存已过期，发协商请求（服务器返回 304，用缓存）；
- 此时按 Ctrl+F5：忽略所有缓存，重新下载图片（响应 200，更新缓存）。
补充：为什么刷新 HTML 和图片表现不一样？
- 图片：通常配置强缓存（
max-age=86400即 1 天），所以正常刷新时优先用缓存； - HTML：通常配置协商缓存（
Cache-Control: no-cache），所以即使正常刷新，也会发验证请求（确认 HTML 是否更新），但不会每次都重新下载（只有 HTML 变了才下载）。
三、常见误区澄清
-
误区：“只有图片会读缓存，JS/CSS 不会”错。JS、CSS、字体等静态资源默认都走强缓存（和图片一样），只是开发时可能因为 “未加哈希值” 导致缓存更新问题，让人误以为 “不读缓存”。
-
误区：“刷新页面就会重新下载所有资源”错。只有 Ctrl+F5 才会忽略所有缓存；F5 只是忽略强缓存，走协商缓存（大部分资源会返回 304，复用缓存）。
-
误区：“浏览器缓存只存在磁盘里”错。有两种缓存：
- 内存缓存（
from memory cache）：临时存储，关闭浏览器就消失（如小图片、常用 JS）； - 磁盘缓存（
from disk cache）：持久化存储，关闭浏览器后仍存在（如大图片、不常用资源）。 - 正常刷新时，优先读内存缓存，内存没有再读磁盘缓存。
- 内存缓存（
总结核心逻辑
- 所有资源都遵循 “优先查缓存” 原则，是否用缓存取决于「HTTP 缓存规则」（强缓存 / 协商缓存）；
- 图片等静态资源因常用强缓存，所以 “看起来总是读缓存”，动态资源（HTML / 接口）因缓存策略更严格，可能会发验证请求；
- 刷新方式决定是否忽略缓存：
- 正常刷新：遵循缓存规则（优先用有效缓存）；
- F5 刷新：忽略强缓存，走协商缓存；
- Ctrl+F5：忽略所有缓存，重新下载。
如果想验证，可打开 Chrome F12→Network，勾选「Disable cache」（禁用缓存）模拟 Ctrl+F5，或观察「Size」列（显示 from disk cache 就是用了缓存）。