一、什么是浏览器缓存？（入门级）
1. 浏览器缓存的定义
浏览器缓存就是：浏览器把之前请求过的资源保存起来，下次访问同样的资源时可以直接用本地副本，而不是重新请求服务器。
举个生活例子：
- 你第一次去咖啡店买咖啡（访问网页）
- 店员记住了你的订单（浏览器缓存资源）
- 你下次来时，店员直接把咖啡给你，不用重新制作（直接用缓存）
2. 浏览器缓存的作用
- 加快访问速度（本地读取比网络快得多）
- 减少流量消耗（尤其移动端用户体验更好）
- 降低服务器压力（减少重复请求）
面试官问：
浏览器缓存的作用和好处是什么？
你可以答：
它可以减少网络请求、提高页面加载速度，并降低服务器压力。
二、浏览器缓存的分类（核心概念）
浏览器缓存分为两大类：
1️⃣ 强缓存（强制缓存）
-
特点：浏览器直接使用本地缓存，不请求服务器。
-
触发条件：
-
服务器在响应头里设置了：
Cache-Control: max-age=秒数- 或旧版本
Expires: 绝对时间
-
-
表现：
- 浏览器控制台
Status显示 200 (from disk/memory cache)
- 浏览器控制台
例子：
HTTP/1.1 200 OK
Cache-Control: max-age=31536000
2️⃣ 协商缓存（对比缓存）
-
特点：浏览器会先问服务器：
“我本地有缓存，你那边更新过吗？”
-
流程：
-
浏览器带上缓存标识（
If-Modified-Since或If-None-Match） -
服务器对比：
- 如果没更新 → 返回
304 Not Modified，浏览器用本地缓存 - 如果更新了 → 返回新资源，状态码
200
- 如果没更新 → 返回
-
-
相关响应头：
Last-Modified/If-Modified-SinceETag/If-None-Match
3️⃣ 优先级总结
-
浏览器访问资源的顺序：
先检查强缓存 → 命中直接用本地↓否则检查协商缓存↓再决定请求新资源
一句话记忆：
强缓存不发请求，协商缓存要问服务器。
三、浏览器缓存的实际应用（进阶）
在真实开发中，不同资源适合不同缓存策略：
1. 静态资源（JS、CSS、图片）
-
策略：强缓存 + 文件名 hash
-
原因：
- 这些文件内容很少改
- 文件名带 hash，更新后浏览器会认为是新文件
示例：
app.91a2d3.js
Cache-Control: max-age=31536000
2. HTML 文件
-
策略：协商缓存或短期缓存
-
原因：
- HTML 更新频繁，不能强缓存太久，否则用户看不到最新版本
-
示例：
Cache-Control: no-cache ETag: "page12345"
3. 接口请求（API 数据）
-
策略：
- 经常变动的数据 → 禁用缓存或加时间戳
- 稳定数据（城市列表、字典表）→ 协商缓存或自定义缓存逻辑
示例：
fetch(`/api/user?id=1&_=${Date.now()}`) // 防止缓存
四、浏览器缓存相关的面试高频题（核心）
面试官最喜欢问这些：
-
浏览器缓存有哪些类型？
- 强缓存（
Cache-Control/Expires） - 协商缓存（
ETag/Last-Modified）
- 强缓存（
-
强缓存和协商缓存的区别？
- 强缓存命中 → 不发请求
- 协商缓存命中 → 发请求但返回 304
-
Cache-Control 常见指令？
max-age：缓存时长（秒）no-cache：不直接用缓存，需要协商no-store：完全禁用缓存immutable：资源永远不会变（适合版本化静态资源）
-
ETag 和 Last-Modified 区别？
Last-Modified：按最后修改时间判断ETag：按文件内容 hash 判断，精度更高
-
实际开发如何设计缓存策略？
- 静态资源：强缓存 + hash
- HTML：协商缓存
- 接口：按业务决定缓存策略
五、答题模板（背会就能面）
如果面试官问：
讲一下浏览器缓存原理？
你可以这样答：
① 先分类
浏览器缓存分为两类：强缓存和协商缓存。
强缓存命中时直接使用本地缓存，不发请求。
协商缓存会向服务器确认资源是否更新，如果未更新返回 304。
② 说明原理
浏览器先查强缓存（Cache-Control / Expires），
命中直接用本地；
否则走协商缓存（ETag / Last-Modified），
服务器确认没更新则返回 304，否则返回新资源。
③ 再讲应用场景
实际开发中：
- 静态资源（JS、CSS、图片）用强缓存 + 文件 hash
- HTML 页面用协商缓存
- 接口数据根据业务选择缓存或加时间戳避免缓存
④ 强调好处
这样能显著提升页面性能、减少带宽和服务器压力。
