浏览器缓存机制

核心说明本文采用「通俗解读专业知识点」结合模式结构清晰、重点突出可直接背诵用于面试重点聚焦面试高频考点强缓存、协商缓存简化次要内容补充面试答题技巧和常考问题助力快速掌握核心。一、浏览器缓存整体结构面试开篇必背通俗说浏览器缓存就是“本地仓库”访问网站时能直接从本地拿资源就不麻烦服务器既省时间又省流量。专业定义浏览器对已请求过的资源进行本地存储后续请求时优先复用本地资源提升加载速度、降低服务器压力。浏览器缓存主要分为三大类面试重点考察前两类合称HTTP缓存1️⃣ 强缓存最“懒”的缓存完全不跟服务器打招呼直接用本地缓存2️⃣ 协商缓存比较“谨慎”会跟服务器打个招呼由服务器决定要不要用缓存3️⃣ Service Worker 缓存可编程缓存面试非重点简单了解即可是前端进阶的缓存方式二、强缓存Strong Cache—— 面试高频重点✅ 核心特点必背通俗说浏览器检查本地缓存发现“没过期”就直接拿来用根本不向服务器发请求。专业表述不发送HTTP请求直接读取本地缓存资源浏览器判断标准为「资源未过期」此时Network面板显示状态码200 (from disk/memory cache)disk cache是硬盘缓存memory cache是内存缓存无需区分面试提一句即可。1️⃣ 强缓存控制字段核心考点1Cache-Control优先级最高面试重点通俗说服务器给资源设定一个“保质期”浏览器在保质期内直接用缓存过期了再找服务器。专业示例HTTP响应头Cache-Control: max-age3600解读表示该资源从请求成功开始3600秒1小时内有效期间再次请求无需访问服务器。常见指令必背面试常考区别指令通俗解读专业作用max-age3600资源保质期3600秒指定资源的缓存有效时间单位秒no-cache不偷懒每次都问服务器不使用强缓存直接进入协商缓存流程no-store不存本地每次都重新下载完全不缓存资源每次请求都需从服务器获取完整资源public谁都能存浏览器、CDN等允许任何缓存节点浏览器、代理服务器等缓存该资源private只有浏览器能存仅允许浏览器本地缓存禁止代理服务器等中间节点缓存2Expires老版本面试了解即可通俗说服务器给资源设定一个“过期时间点”比如“2026年10月21日过期”浏览器对比本地时间没到点就用缓存。专业示例HTTP响应头Expires: Wed, 21 Oct 2026 07:28:00 GMT核心缺点依赖客户端浏览器本地时间如果用户修改本地时间会导致缓存判断失效比如把时间改成过期后缓存直接失效。⚠️ 优先级说明必背如果Cache-Control和Expires同时存在Cache-Control 优先级 Expires因为Expires的缺陷太明显现在基本用Cache-Control。 强缓存流程图面试口述必背第一次请求浏览器向服务器发送请求服务器返回资源 强缓存控制字段如Cache-Control: max-age3600第二次请求1小时内未过期浏览器检查本地缓存发现资源未过期直接从本地缓存读取资源不向服务器发送任何请求 面试示例帮助理解可背诵场景你的网站有一个脚本文件script srcapp.js/script服务器返回的响应头包含 Cache-Control: max-age60010分钟。结果10分钟内刷新页面Network面板会显示 app.js 的状态为 from memory cache且没有任何HTTP请求发送到服务器。三、协商缓存Conditional Cache—— 面试高频重点✅ 核心特点必背通俗说强缓存过期了浏览器不确定资源有没有更新就向服务器“请示”由服务器判断要不要用本地缓存。专业表述浏览器会发送HTTP请求到服务器服务器对比资源状态决定是否复用本地缓存若资源未变化服务器返回状态码304 Not Modified不返回资源内容只返回响应头若资源已变化返回200 新资源。协商缓存的两种实现方式必背面试常考对比1️⃣ Last-Modified If-Modified-Since基于时间的判断较老旧通俗说服务器记录资源最后修改时间浏览器下次请求时带上这个时间服务器对比“现在的修改时间”和“浏览器带的时间”判断资源有没有变。第一次请求服务器返回资源并在响应头中添加 Last-Modified资源最后修改时间示例Last-Modified: Wed, 01 Mar 2026 10:00:00 GMT第二次请求浏览器读取本地缓存中的 Last-Modified在请求头中添加 If-Modified-Since带上上次的修改时间示例If-Modified-Since: Wed, 01 Mar 2026 10:00:00 GMT服务器判断资源未修改当前修改时间 If-Modified-Since→ 返回 304浏览器用本地缓存资源已修改当前修改时间 If-Modified-Since→ 返回 200 新资源 新的 Last-Modified❌ 缺点必背面试常考时间精度低只能精确到秒若1秒内资源被修改多次服务器无法识别误判风险文件修改但内容未变如修改文件名再改回服务器会认为资源已修改返回新资源浪费流量2️⃣ ETag If-None-Match基于内容的判断更精准面试重点通俗说服务器给资源生成一个“内容指纹”比如根据文件内容计算的一串字符浏览器下次请求时带上这个指纹服务器对比当前资源的指纹和浏览器带的指纹判断内容有没有变。第一次请求服务器返回资源并在响应头中添加 ETag资源内容指纹示例ETag: abc123第二次请求浏览器读取本地缓存中的 ETag在请求头中添加 If-None-Match带上上次的指纹示例If-None-Match: abc123服务器判断指纹一致资源内容未变→ 返回 304浏览器用本地缓存指纹不一致资源内容已变→ 返回 200 新资源 新的 ETag 优先级必背ETag Last-Modified因为ETag基于内容判断更精准能解决Last-Modified的缺点。四、强缓存 vs 协商缓存面试必背对比建议默写对比维度强缓存协商缓存是否发送HTTP请求❌ 不发送✅ 发送仅验证不传递资源内容返回状态码200 (from disk/memory cache)304未修改/ 200已修改服务器是否参与判断否浏览器自主判断是服务器判断资源状态性能更好无需请求服务器次之需发送请求无需传输资源五、完整缓存流程面试必会口述核心浏览器请求资源时判断顺序如下必背面试口述要流畅1️⃣ 先判断是否有强缓存有强缓存且资源未过期 → 直接读取本地缓存不发送请求有强缓存但资源已过期 → 进入协商缓存流程2️⃣ 再判断是否有协商缓存标识Last-Modified/ETag有标识 → 发送请求到服务器验证资源是否变化资源未修改 → 服务器返回304浏览器用本地缓存资源已修改 → 服务器返回200 新资源更新本地缓存3️⃣ 既没有强缓存也没有协商缓存 → 正常发送请求服务器返回200 资源同时设置缓存标识强/协商六、真实场景应用面试加分项必背 场景1JS/CSS等静态文件更新了如何保证用户拿到新版本通俗说给静态文件名加“指纹”hash值比如 app.js 改成 app.1a2b3c.js这样更新后文件名变了浏览器会认为是新资源重新下载。专业表述采用「缓存破坏Cache Busting」策略具体操作给静态资源JS、CSS、图片文件名添加hash后缀如app.[hash].js给静态资源设置强缓存max-age31536000一年因为文件名变了才会更新不用担心过期资源更新时hash值会变化文件名随之改变浏览器会识别为新资源重新请求下载 场景2用户强制刷新页面缓存会发生什么变化面试常考普通刷新点击刷新按钮 / 按 F5请求头携带 Cache-Control: no-cache跳过强缓存直接进入协商缓存强制刷新Ctrl F5请求头携带 Cache-Control: no-store完全跳过强缓存与协商缓存直接从服务器拉取完整资源DevTools 勾选 Disable cache全程禁用读写缓存每次都向服务器请求全新资源。七、面试高频问题必背直接记答案❓1. 为什么需要协商缓存核心答案强缓存过期后资源可能并没有发生变化如果直接重新下载会浪费流量和时间协商缓存可以通过服务器验证资源状态未变化则复用本地缓存既保证资源新鲜又提升性能、节省带宽。❓2. 304状态码会返回资源内容吗为什么核心答案不会。因为304是“资源未修改”的响应服务器只需告诉浏览器“可以用本地缓存”即可无需返回资源内容这样能减少网络传输量提升加载速度。❓3. 强缓存一般设置多久不同资源有区别吗核心答案有区别分资源类型设置HTML文件不设置强缓存或设置协商缓存因为HTML是入口文件若强缓存会导致引用的静态资源更新后用户仍读取旧HTML无法获取新版本静态资源JS、CSS、图片带hash设置1年max-age31536000因为文件名带hash更新时会自动触发缓存更新无需担心过期问题。❓4. 为什么HTML文件不能设置强缓存延伸题必背核心答案HTML是页面入口文件负责引用JS、CSS等静态资源。如果给HTML设置强缓存当静态资源更新文件名变了但HTML仍处于强缓存有效期内浏览器会直接读取旧HTML引用的还是旧的静态资源路径导致用户无法看到新版本的页面。❓5. no-cache 和 no-store 的区别高频易错必背核心答案两者都禁止强缓存但对协商缓存和本地存储的处理不同no-cache允许本地缓存但不允许直接使用强缓存必须发送请求到服务器进行协商缓存验证验证通过后才能使用本地缓存。no-store完全禁止本地缓存不允许浏览器存储任何资源每次请求都必须从服务器获取完整资源不存在缓存复用。❓6. 浏览器缓存失效的场景有哪些面试加分核心答案4种常见场景用户手动清除浏览器缓存如设置中清除浏览数据用户进行强制刷新Ctrl F5服务器修改了缓存控制字段如修改Cache-Control、ETag、Last-Modified静态资源文件名发生变化如hash值改变触发缓存破坏八、面试标准回答模板必背直接套用当面试官问“请讲一下浏览器缓存机制”按以下结构回答流畅、有条理加分浏览器缓存主要分为强缓存和协商缓存两者合称HTTP缓存是面试重点还有一种Service Worker缓存属于可编程缓存非重点。强缓存的核心是“不发请求直接用缓存”由Cache-Control和Expires控制其中Cache-Control优先级更高常用指令有max-age、no-cache、no-store等未过期时返回200 (from disk/memory cache)。协商缓存的核心是“发请求服务器决定是否用缓存”有两种实现方式ETagIf-None-Match基于内容更精准和Last-ModifiedIf-Modified-Since基于时间有缺陷ETag优先级更高未修改返回304已修改返回200。完整请求流程先判断强缓存未过期直接用过期则进入协商缓存服务器验证资源状态未修改用缓存已修改下载新资源两者都没有则正常请求。生产环境应用静态资源带hash设1年强缓存通过文件名hash实现缓存破坏HTML不做强缓存避免引用旧资源。 总结一句话面试收尾加深印象浏览器请求资源时优先走强缓存不发请求、直接复用本地资源强缓存过期后走协商缓存通过ETag或Last-Modified向服务器验证资源状态未变化返回304复用缓存已变化返回200获取新资源最终实现“高效加载、节省带宽”的目的。