https://fe-interview.pangcy.cn/tags/http%E7%BC%93%E5%AD%98/Recent content in HTTP缓存 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/network/network-08/Tue, 04 Mar 2025 09:31:00 +0000https://fe-interview.pangcy.cn/docs/network/network-08/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p><strong>核心能力维度</strong>：浏览器缓存机制理解、HTTP协议掌握程度、性能优化实践能力</p> <ol> <li><strong>缓存策略区分</strong>：辨别强缓存与协商缓存的触发条件及交互流程</li> <li><strong>HTTP头部理解</strong>：解析Cache-Control/Expires与Last-Modified/ETag的工作机制与优先级</li> <li><strong>性能优化思维</strong>：评估immutable指令对缓存策略的改进价值及应用场景</li> <li><strong>工程实践认知</strong>：缓存策略在CDN部署、版本管理等场景的应用考量</li> <li><strong>问题排查能力</strong>：识别常见的缓存配置错误及验证逻辑漏洞</li> </ol> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>Cache-Control &gt; ETag &gt; Last-Modified &gt; Expires</p> <h4 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ol> <li><strong>强缓存</strong></li> </ol> <ul> <li>通过<code>Cache-Control: max-age=N</code>或<code>Expires</code>判断资源新鲜度</li> <li>资源未过期时直接返回200 OK (from disk/memory cache)，<strong>不产生网络请求</strong></li> <li>优先级：<code>Cache-Control</code> &gt; <code>Expires</code>（HTTP/1.1规范明确）</li> </ul> <ol start="2"> <li><strong>协商缓存</strong></li> </ol> <ul> <li>强缓存失效后，携带<code>If-Modified-Since</code>（对应Last-Modified）或<code>If-None-Match</code>（对应ETag）发起请求</li> <li>服务器通过对比时间戳（Last-Modified）或内容哈希（ETag）判断资源变更</li> <li>未变更返回304 Not Modified，<strong>更新本地缓存有效期</strong></li> </ul> <ol start="3"> <li><strong>Immutable指令</strong></li> </ol> <ul> <li><code>Cache-Control: immutable</code>声明资源内容永不变更</li> <li>有效期內<strong>跳过协商验证</strong>，彻底避免304请求，适用于带哈希版本号的静态资源</li> </ul> <h4 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ul> <li>混淆<code>no-cache</code>（强制协商验证）与<code>no-store</code>（禁止缓存）</li> <li>认为ETag可完全替代Last-Modified（实际可并行使用）</li> <li>忽略304响应仍需要更新<code>Cache-Control</code>时效</li> <li>在动态资源错误使用immutable导致更新失效</li> </ul> <hr> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>浏览器缓存通过两级策略提升性能：</p> <ol> <li><strong>强缓存</strong>：</li> </ol> <ul> <li>检查<code>Cache-Control</code>/<code>Expires</code>，未过期直接使用本地缓存</li> <li>典型场景：重复访问静态资源（如图片、CSS）</li> </ul> <ol start="2"> <li><strong>协商缓存</strong>：</li> </ol> <ul> <li>资源过期后，携带<code>If-Modified-Since</code>或<code>If-None-Match</code>发起请求</li> <li>服务器对比资源标识，未变更返回304，节省带宽</li> </ul> <p><strong>推荐immutable指令原因</strong>：</p> <ul> <li>彻底消除协商请求，尤其适用于带哈希指纹的静态资源（如<code>app.a3bc4d.js</code>）</li> <li>避免浏览器因用户刷新触发的多余验证（常规缓存策略可能降级验证）</li> </ul> <hr> <h2 id="解决方案">解决方案 <a href="#%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="配置示例nginx">配置示例（Nginx） <a href="#%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8bnginx" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3> <div class="prism-codeblock "> <pre id="3ad9ae0" class="language-nginx "> <code>location /static/ { add_header Cache-Control &#34;public, max-age=31536000, immutable&#34;; # 版本化资源设置长期缓存&#43;immutable # 非版本化资源应避免使用，防止更新失效 }</code> </pre> </div> <h3 id="优化建议">优化建议 <a href="#%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li><strong>版本分离</strong>：对内容哈希资源使用immutable，动态资源采用较短max-age</li> <li><strong>兜底机制</strong>：HTML文件禁用强缓存，确保核心资源更新</li> <li><strong>监控覆盖</strong>：通过Navigation Timing API统计缓存命中率</li> </ol> <hr> <h2 id="深度追问">深度追问 <a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><ol> <li><strong>如何解决ETag在分布式系统的同步问题？</strong></li> </ol> <ul> <li>提示：使用一致性哈希算法或统一存储ETag生成规则</li> </ul> <ol start="2"> <li> <p><strong>用户强制刷新（Ctrl+F5）时的缓存策略变化？</strong>- 提示：请求头添加<code>Cache-Control: no-cache</code>绕过强缓存</p>