校招 未知部门 / 前端 / 一面

<h2>滴滴实习一面：浏览器缓存机制</h2> <p>这是之前一个27同学面滴滴实习的题目，部门是体验平台，针对浏览器缓存问了强弱缓存区别以及使用场景等问题，小圆这边整理好了～</p><p></p><p>浏览器缓存是前端性能优化中最重要的一环。合理利用缓存，不仅能显著提升页面加载速度、减少服务器压力，还能改善用户体验。但在面试中，很多人只会“Cache-Control、ETag、Expires”这几个名词，却说不清底层逻辑与交互过程。本文讲解浏览器缓存机制，从类型、原理到实践配置，帮你彻底吃透这个高频考点。 </p><h2>一、缓存的分类概览</h2><p>浏览器缓存大体分为两类：</p><table><tbody><tr><td><p>类型</p></td><td><p>是否向服务器发请求</p></td><td><p>命中后资源来源</p></td><td><p>常用字段</p></td></tr><tr><td><p><strong>强缓存（Strong Cache）</strong></p></td><td><p>否</p></td><td><p>本地缓存（Memory/Disk）</p></td><td><p><code>Cache-Control</code></p><p>、<code>Expires</code></p></td></tr><tr><td><p><strong>协商缓存（Negotiated Cache）</strong></p></td><td><p>是</p></td><td><p>服务器返回304，浏览器使用本地缓存</p></td><td><p><code>ETag/If-None-Match</code></p><p>、<code>Last-Modified/If-Modified-Since</code></p></td></tr></tbody></table><p>二者的关系可以概括为：<strong>强缓存优先，未命中后再进入协商缓存。</strong></p><h2>二、强缓存机制详解</h2><h3>1. 触发时机</h3><p>当浏览器请求某个资源时，会先检查本地缓存是否可用（即强缓存是否命中）。</p><h3>2. 核心字段</h3><h4>（1）<code>Cache-Control</code></h4><p>现代浏览器主推的缓存控制头，它的优先级高于 <code>Expires</code>。常见取值如下：</p><table><tbody><tr><td><p>指令</p></td><td><p>含义</p></td></tr><tr><td><p><code>max-age=600</code></p></td><td><p>资源在600秒内有效</p></td></tr><tr><td><p><code>no-cache</code></p></td><td><p>强缓存失效，强制进入协商缓存</p></td></tr><tr><td><p><code>no-store</code></p></td><td><p>禁止缓存任何内容</p></td></tr><tr><td><p><code>public</code></p></td><td><p>所有人都可以缓存（CDN、中间代理）</p></td></tr><tr><td><p><code>private</code></p></td><td><p>仅客户端可缓存，代理服务器不能缓存</p></td></tr></tbody></table><h4>（2）<code>Expires</code></h4><p>HTTP/1.0 时代的产物，通过<strong>绝对时间</strong>控制缓存失效，如：</p><pre> Expires: Wed, 22 Oct 2025 12:00:00 GMT </pre><p>缺点是依赖客户端时间，易受系统时间差影响。</p><h3>3. 强缓存的优先级判定</h3><p>浏览器判断逻辑如下：</p><pre> if (Cache-Control 存在) → 使用 Cache-Control else if (Expires 存在) → 使用 Expires else → 不使用强缓存 </pre><h2>四、协商缓存机制详解</h2><p>当强缓存失效后，浏览器会携带部分资源标识向服务器发起请求，询问资源是否更新。若服务器确认资源未变更，则返回 <code>304 Not Modified</code>，浏览器直接使用本地缓存副本。</p><h3>1. 核心字段</h3><h4>（1）<code>Last-Modified / If-Modified-Since</code></h4><ul><li><strong>服务器首次响应</strong>：</li></ul><pre> Last-Modified: Wed, 22 Oct 2025 10:00:00 GMT </pre><ul><li><strong>浏览器下一次请求时</strong>：</li></ul><pre> If-Modified-Since: Wed, 22 Oct 2025 10:00:00 GMT </pre><p>若服务器判断文件无更新，则返回 <code>304</code>。</p><p><strong>缺点</strong>：</p><ul><li>时间精度以秒为单位，若文件在一秒内被多次修改，可能检测不到更新。</li><li>一些文件周期性重新生成，即使内容相同，时间不同也会触发重新下载。</li></ul><h4>（2）<code>ETag / If-None-Match</code></h4><p>ETag 是资源内容的唯一标识（通常是哈希值）。</p><ul><li><strong>服务器首次响应</strong>：</li></ul><pre> ETag: &quot;filehash-12345&quot; </pre><ul><li><strong>浏览器下一次请求时</strong>：</li></ul><pre> If-None-Match: &quot;filehash-12345&quot; </pre><p>若 ETag 一致，则返回 <code>304</code>。</p><p><strong>优点</strong>：精度更高，不依赖时间。<strong>缺点</strong>：计算 ETag 会增加服务器负担。</p><p><strong>一般做法</strong>：两组字段（ETag / Last-Modified）常同时使用，保证兼容性与准确性。</p><h2>五、缓存的整体流程</h2><p>浏览器加载资源时的完整判断流程如下：</p><ol><li>检查强缓存（<code>Cache-Control</code>、<code>Expires</code>）</li><li>发起请求携带验证字段（<code>If-Modified-Since</code> 或 <code>If-None-Match</code>）。</li><li>服务器判断资源是否变动：</li></ol><h2>六、缓存位置与生命周期</h2><p>缓存可存在多个层次：</p><table><tbody><tr><td><p>位置</p></td><td><p>特点</p></td></tr><tr><td><p><strong>Memory Cache</strong></p></td><td><p>存在内存中，关闭标签页即失效</p></td></tr><tr><td><p><strong>Disk Cache</strong></p></td><td><p>存储于硬盘，可长期存在</p></td></tr><tr><td><p><strong>Service Worker Cache</strong></p></td><td><p>可自定义缓存逻辑，离线可用</p></td></tr><tr><td><p><strong>Push Cache（HTTP/2）</strong></p></td><td><p>仅连接生命周期内有效</p></td></tr></tbody></table><p>浏览器通常会根据资源类型与大小选择合适的存储位置。</p><h2>七、实际项目中的应用策略</h2><h3>1. 静态资源（JS/CSS/图片）</h3><ul><li>使用文件指纹（hash）解决更新问题；</li><li>设置长时间缓存：</li></ul><pre> Cache-Control: max-age=31536000, immutable </pre><ul><li>文件变更时文件名变化，浏览器自动拉取新版本。</li></ul><h3>2. 接口请求（API）</h3><ul><li>频繁变化 → 使用 <code>no-cache</code> 或 <code>no-store</code>；</li><li>GET 接口若数据稳定，可考虑 <code>ETag</code> 提升性能。</li></ul><h3>3. HTML 页面</h3><ul><li>通常设置为 <code>no-cache</code>；</li><li>通过版本号或构建标识控制更新。</li></ul><h3>总结</h3><p>前端常用的缓存方案一般采用强缓存与协商缓存相结合的方式，具体是：</p><p>1. HTML文档配置协商缓存</p><p>2. JS、CSS、图片等资源配置强缓存</p><p>这样当项目版本更新时，可以获取最新的页面；若版本未更新，则可以继续复用之前的缓存</p><h2>八、前端开发者常见误区</h2><ol><li><strong>误区1：</strong><strong><code>no-cache</code></strong><strong> 就是不缓存</strong>实际上，它只是强缓存失效，仍可能走协商缓存。</li><li><strong>误区2：</strong><strong><code>ETag</code></strong><strong> 与 </strong><strong><code>Last-Modified</code></strong><strong> 互斥</strong>它们可以并存，服务器优先验证 ETag，再验证时间。</li><li><strong>误区3：缓存设置全交给后端</strong>前端在构建环节（Webpack/Vite）也能配置静态资源 hash 与缓存策略。</li></ol><h2>总结</h2><p>浏览器缓存机制是 Web 性能优化的基石。可以用一句话总结它的核心逻辑：<strong>先看强缓存（Cache-Control、Expires），再看协商缓存（ETag、Last-Modified）。命中即本地读取，未命中则询问服务器是否更新。</strong></p><p><strong>面试时</strong>若能把流程、字段、优缺点等等讲清楚，并结合项目实践（比如资源指纹 + CDN 缓存策略），可以给面试官留下好印象哦。</p><a>#前端八股文#</a><a>#面试#</a><a>#日常实习#</a><a>#前端#</a><a>#秋招#</a>