https://fe-interview.pangcy.cn/tags/%E7%A6%BB%E7%BA%BF%E5%AD%98%E5%82%A8/Recent content in 离线存储 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/html/html-09/Tue, 04 Mar 2025 06:58:29 +0000https://fe-interview.pangcy.cn/docs/html/html-09/<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>本题主要考察以下核心能力维度：</p> <ol> <li><strong>传统离线存储技术理解</strong>：对Application Cache机制的全流程掌握</li> <li><strong>现代PWA方案认知</strong>：Service Worker架构优势及技术演进趋势</li> <li><strong>缓存策略设计能力</strong>：对比不同离线方案时的技术选型判断力</li> </ol> <p>具体技术评估点：</p> <ul> <li>Manifest文件语法规范及缓存控制策略</li> <li>浏览器检测更新的触发条件与版本管理机制</li> <li>Service Worker的事件驱动模型与缓存策略可编程性</li> <li>传统方案与现代方案在更新可靠性、细粒度控制等方面的差异</li> </ul> <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>Service Worker事件驱动 &gt; Manifest解析机制 &gt; 浏览器缓存策略 &gt; 资源更新验证</p> <h3 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></h3><p><strong>Application Cache：</strong></p> <ol> <li><strong>Manifest结构</strong>：</li> </ol> <div class="prism-codeblock "> <pre id="16f158a" class="language-manifest "> <code>CACHE MANIFEST # v1.0.0 # 版本注释触发更新 CACHE: /styles/main.css /scripts/app.js NETWORK: /api/endpoint FALLBACK: /images/ /offline-image.png</code> </pre> </div> <ol start="2"> <li><strong>更新流程</strong>：</li> </ol> <ul> <li>首次加载：缓存所有CACHE段资源</li> <li>后续加载：对比manifest文件哈希值变化</li> <li>更新过程：异步下载新资源但延后生效（直到页面重新加载）</li> </ul> <ol start="3"> <li><strong>缓存策略缺陷</strong>：</li> </ol> <ul> <li>白屏问题：若manifest更新失败会导致整个缓存失效</li> <li>版本错乱：同时存在新旧版本资源时可能引发资源不一致</li> <li>不可控更新：无法编程控制更新时机</li> </ul> <p><strong>Service Worker优势</strong>：</p> <ul> <li>拦截网络请求：通过fetch事件实现细粒度缓存控制</li> <li>生命周期管理：install/activate/ fetch事件驱动</li> <li>持久化存储：与Cache API配合实现版本控制</li> <li>后台同步：支持离线任务队列</li> </ul> <h3 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></h3><ul> <li>误认为manifest注释修改必定触发更新（需文件内容变化）</li> <li>混淆SW的skipWaiting()与clients.claim()的作用</li> <li>未处理Cache API的版本冲突问题</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><strong>Application Cache工作原理：</strong></p>