<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>策略设计 on ZiYang FrontEnd Interview</title><link>https://fe-interview.pangcy.cn/tags/%E7%AD%96%E7%95%A5%E8%AE%BE%E8%AE%A1/</link><description>Recent content in 策略设计 on ZiYang FrontEnd Interview</description><generator>Hugo</generator><language>en-us</language><lastBuildDate>Thu, 06 Mar 2025 13:07:39 +0800</lastBuildDate><atom:link href="https://fe-interview.pangcy.cn/tags/%E7%AD%96%E7%95%A5%E8%AE%BE%E8%AE%A1/index.xml" rel="self" type="application/rss+xml"/><item><title>Cache-Control指令集详解</title><link>https://fe-interview.pangcy.cn/docs/network/network-15/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-15/</guid><description>&lt;h2 id="回答">回答 &lt;a href="#%e5%9b%9e%e7%ad%94" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;h3 id="一考察点分析">一、考察点分析 &lt;a href="#%e4%b8%80%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>&lt;strong>核心能力维度&lt;/strong>：HTTP缓存机制理解、缓存策略设计能力、业务场景分析能力&lt;br>
&lt;strong>技术评估点&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>Cache-Control指令优先级逻辑&lt;/li>
&lt;li>浏览器与CDN的缓存行为差异&lt;/li>
&lt;li>动态内容与静态资源的缓存特征&lt;/li>
&lt;li>缓存验证机制（如ETag/Last-Modified）协同工作&lt;/li>
&lt;li>不同业务场景下的TTL(Time To Live)设计原则&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h3 id="二技术解析">二、技术解析 &lt;a href="#%e4%ba%8c%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>&lt;strong>关键知识点&lt;/strong>：缓存指令优先级 &amp;gt; 缓存存储规则 &amp;gt; 缓存验证流程&lt;/p>
&lt;p>&lt;strong>原理剖析&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>优先级规则&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="ec30f6e" class="language- ">
 &lt;code>no-store(禁用缓存) &amp;gt; must-revalidate(强制验证 &amp;gt; no-cache(协商缓存) &amp;gt; max-age(强缓存)&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>当存在冲突指令时，限制性更强的指令生效。例如同时设置&lt;code>no-store&lt;/code>和&lt;code>max-age=3600&lt;/code>时，浏览器不会存储任何缓存副本。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>指令详解&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>&lt;code>max-age=N&lt;/code>：资源在N秒内被视为新鲜，优先使用本地缓存（强缓存）&lt;/li>
&lt;li>&lt;code>no-cache&lt;/code>：每次需携带验证信息到服务端检查（协商缓存）&lt;/li>
&lt;li>&lt;code>no-store&lt;/code>：禁止任何形式的缓存存储&lt;/li>
&lt;li>&lt;code>must-revalidate&lt;/code>：过期缓存必须验证有效性，但新鲜期内可直接使用&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>常见误区&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>混淆&lt;code>no-cache&lt;/code>与&lt;code>no-store&lt;/code>：前者允许存储但需验证，后者完全禁止存储&lt;/li>
&lt;li>误认为&lt;code>max-age=0&lt;/code>等价于&lt;code>no-cache&lt;/code>（实际需要配合&lt;code>must-revalidate&lt;/code>）&lt;/li>
&lt;li>忽略CDN对缓存指令的特殊处理（如部分CDN会忽略&lt;code>no-store&lt;/code>）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h3 id="三问题解答">三、问题解答 &lt;a href="#%e4%b8%89%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>&lt;strong>指令优先级&lt;/strong>：当响应头包含多个冲突指令时，按&lt;code>no-store &amp;gt; must-revalidate &amp;gt; no-cache &amp;gt; max-age&lt;/code>顺序生效。例如同时设置&lt;code>no-cache, max-age=3600&lt;/code>时，浏览器将执行协商缓存而非强缓存。&lt;/p>
&lt;p>&lt;strong>场景策略设计&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>电商页面（动态内容）：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="3dc49ab" class="language-http ">
 &lt;code>Cache-Control: no-cache, max-age=0, must-revalidate&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>配合&lt;code>ETag&lt;/code>实现秒级更新价格库存，避免用户看到过期数据。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>静态资源站点：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="c582b45" class="language-http ">
 &lt;code>Cache-Control: public, max-age=31536000, immutable&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>通过文件哈希实现永久缓存，配合CDN边缘节点加速，资源更新时修改URL指纹。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h3 id="四解决方案">四、解决方案 &lt;a href="#%e5%9b%9b%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>&lt;strong>编码示例（Nginx配置）&lt;/strong>：&lt;/p></description></item></channel></rss>