<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Network on ZiYang FrontEnd Interview</title><link>https://fe-interview.pangcy.cn/tags/network/</link><description>Recent content in Network 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/network/index.xml" rel="self" type="application/rss+xml"/><item><title>浏览器多进程架构与进程职责</title><link>https://fe-interview.pangcy.cn/docs/network/network-01/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-01/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该问题主要考察候选人以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>浏览器底层原理&lt;/strong>：对现代浏览器架构设计的理解深度，能否跳出应用层认知局限&lt;/li>
&lt;li>&lt;strong>系统设计思维&lt;/strong>：分析多进程架构优势时的技术判断力，包括安全性、稳定性等非功能性需求&lt;/li>
&lt;li>&lt;strong>进程隔离认知&lt;/strong>：理解操作系统层面的进程隔离机制与浏览器安全策略的映射关系&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>主进程的核心职责与管理范围&lt;/li>
&lt;li>渲染进程的沙箱机制实现原理&lt;/li>
&lt;li>GPU硬件加速的进程级支持&lt;/li>
&lt;li>插件进程的稳定性隔离策略&lt;/li>
&lt;li>进程崩溃的容错机制设计&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>浏览器进程模型 &amp;gt; 进程隔离策略 &amp;gt; 沙箱机制 &amp;gt; 硬件加速架构&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>现代浏览器采用多进程架构实现模块化隔离，Chromium架构中典型包含：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>Browser Process（主进程）&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>统筹浏览器框架（地址栏/书签）&lt;/li>
&lt;li>管理所有子进程生命周期&lt;/li>
&lt;li>处理网络请求（部分架构含独立Network Process）&lt;/li>
&lt;li>负责系统级操作（文件存取/通知）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Renderer Process（渲染进程）&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>每个标签页独立进程（默认策略）&lt;/li>
&lt;li>解析HTML/CSS、执行JavaScript&lt;/li>
&lt;li>基于Blink引擎的排版计算&lt;/li>
&lt;li>运行在沙箱环境中，禁止直接IO操作&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>GPU Process&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>独立处理图形计算任务&lt;/li>
&lt;li>实现CSS 3D变换的硬件加速&lt;/li>
&lt;li>负责图层合成（Layer Compositing）&lt;/li>
&lt;li>避免图形驱动崩溃影响主进程&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Plugin Process&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>隔离Flash/PDF等插件运行&lt;/li>
&lt;li>遵循严格权限控制策略&lt;/li>
&lt;li>插件崩溃仅影响当前实例&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;h3 id="安全性与稳定性增益">安全性与稳定性增益 &lt;a href="#%e5%ae%89%e5%85%a8%e6%80%a7%e4%b8%8e%e7%a8%b3%e5%ae%9a%e6%80%a7%e5%a2%9e%e7%9b%8a" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>故障隔离&lt;/strong>：渲染进程崩溃仅需刷新页面，不影响其他标签（类似船舶水密舱设计）&lt;/li>
&lt;li>&lt;strong>权限控制&lt;/strong>：沙箱机制限制渲染进程的系统访问权限（如无法直接写磁盘）&lt;/li>
&lt;li>&lt;strong>资源隔离&lt;/strong>：CSS/JS解析错误不会阻塞浏览器主界面&lt;/li>
&lt;li>&lt;strong>性能优化&lt;/strong>：GPU进程独立释放主线程压力&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误以为多线程可替代多进程的安全优势&lt;/li>
&lt;li>混淆Browser Process与Renderer Process的职责边界&lt;/li>
&lt;li>忽视现代浏览器中Network Process的独立存在&lt;/li>
&lt;/ul>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>现代浏览器通过多进程架构实现功能解耦与安全控制：&lt;/p></description></item><item><title>关键渲染流程阶段解析</title><link>https://fe-interview.pangcy.cn/docs/network/network-02/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-02/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该问题主要考察候选人对现代浏览器渲染机制的系统性理解，核心评估维度包括：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>浏览器渲染流水线&lt;/strong>：掌握从HTML解析到像素渲染的全流程阶段划分&lt;/li>
&lt;li>&lt;strong>关键结构理解&lt;/strong>：区分DOM Tree、CSSOM、Layout Tree等核心数据结构的关系&lt;/li>
&lt;li>&lt;strong>渲染优化原理&lt;/strong>：理解分层渲染、合成层等性能优化机制&lt;/li>
&lt;li>&lt;strong>跨阶段协作&lt;/strong>：解析阻塞、样式计算、图层合并等环节的协同机制&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>DOM树构建与解析阻塞机制&lt;/li>
&lt;li>CSSOM的逐步构建与样式继承规则&lt;/li>
&lt;li>布局树（Layout Tree）的过滤规则&lt;/li>
&lt;li>分层树（Layer Tree）的创建条件&lt;/li>
&lt;li>绘制列表（Paint Record）的生成逻辑&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>渲染引擎工作流：DOM Tree → CSSOM → Render Tree → Layout → Layer → Paint → Composite&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>
&lt;p>&lt;strong>DOM树构建&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>解析器（HTML Parser）通过&lt;strong>深度优先遍历&lt;/strong>生成DOM树，遇到&lt;code>&amp;lt;script&amp;gt;&lt;/code>时触发同步解析阻塞（可通过async/defer优化）&lt;/li>
&lt;li>预加载扫描器（Preload Scanner）并行请求CSS/图片等资源&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>CSSOM构建&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>样式表解析完全&lt;strong>逆向层级&lt;/strong>（从底层规则到上层覆盖），需要完整CSSOM才能保证样式计算的准确性&lt;/li>
&lt;li>&lt;code>@import&lt;/code>会创建新的HTTP请求链，可能阻塞渲染&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>布局树生成&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>合并DOM+CSSOM生成Render Tree，过滤掉&lt;code>display:none&lt;/code>等不可见节点&lt;/li>
&lt;li>进行&lt;strong>盒模型计算&lt;/strong>（重排），输出包含元素几何信息的Layout Tree&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>分层与绘制&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>根据will-change、z-index等属性创建&lt;strong>合成层&lt;/strong>（Compositing Layers）&lt;/li>
&lt;li>绘制模块生成&lt;strong>绘制指令列表&lt;/strong>（Paint Records），不同图层对应独立的位图存储&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误以为DOM/CSSOM构建是并行进行的（实际CSSOM构建会阻塞JS执行）&lt;/li>
&lt;li>混淆Repaint（重绘）和Reflow（重排）的触发条件&lt;/li>
&lt;li>忽视复合层过度创建导致的内存问题&lt;/li>
&lt;/ul>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>现代浏览器渲染流程分为六个关键阶段：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>DOM构建&lt;/strong>：HTML解析器将字节流转换为带有父子关系的DOM节点树，遇到CSS/JS资源时会触发预加载，同步脚本会阻塞解析&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>CSSOM构建&lt;/strong>：样式表按从右到左的选择器匹配规则构建样式规则树，需要完整解析才能保证准确的样式继承&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>布局计算&lt;/strong>：合并DOM和CSSOM生成布局树，排除不可见元素，计算所有元素的几何位置信息（重排）&lt;/p></description></item><item><title>重排与重绘的优化策略</title><link>https://fe-interview.pangcy.cn/docs/network/network-03/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-03/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>浏览器渲染机制理解&lt;/strong>：考核对渲染流水线（Rendering Pipeline）各阶段（Layout、Paint、Composite）的掌握程度&lt;/li>
&lt;li>&lt;strong>性能优化意识&lt;/strong>：评估对关键渲染路径优化的实战经验及解决方案储备&lt;/li>
&lt;li>&lt;strong>DOM操作原理认知&lt;/strong>：检验对API调用与渲染引擎交互机制的了解&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>触发重排的CSS属性与DOM操作类型识别&lt;/li>
&lt;li>重绘与重排的本质区别及性能影响&lt;/li>
&lt;li>浏览器渲染队列合并机制及强制刷新条件&lt;/li>
&lt;li>现代框架虚拟DOM的优化原理映射&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>渲染队列合并 &amp;gt; 几何属性修改 &amp;gt; 合成层优化&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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;code>offsetTop&lt;/code>、&lt;code>scrollHeight&lt;/code>等布局属性时（相当于查询快递单号），会强制立即执行队列任务以保证数据准确性。&lt;/p>
&lt;p>重排触发条件（布局变更）：&lt;/p>
&lt;ul>
&lt;li>修改几何属性（width/height/margin）&lt;/li>
&lt;li>增删可见DOM元素&lt;/li>
&lt;li>窗口resize/字体加载&lt;/li>
&lt;li>获取布局属性值（触发强制同步布局）&lt;/li>
&lt;/ul>
&lt;p>仅重绘场景（样式变更）：&lt;/p>
&lt;ul>
&lt;li>color/background-color等外观属性变化&lt;/li>
&lt;li>visibility/radient变化（不改变布局）&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>误将&lt;code>transform&lt;/code>归为重排操作（实际触发合成层重组）&lt;/li>
&lt;li>认为&lt;code>display: none&lt;/code>元素修改不会触发重排（隐藏元素修改后显示仍会导致布局变化）&lt;/li>
&lt;li>忽略&lt;code>getComputedStyle&lt;/code>等API的布局副作用&lt;/li>
&lt;/ol>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>重排由几何属性变更触发（如修改宽高、偏移量），重绘仅影响外观属性（如颜色）。优化方案：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>批量DOM更新&lt;/strong>：使用&lt;code>document.createDocumentFragment&lt;/code>合并多次操作&lt;/li>
&lt;li>&lt;strong>离线处理&lt;/strong>：先&lt;code>display:none&lt;/code>修改元素再恢复显示&lt;/li>
&lt;li>&lt;strong>避免强制布局抖动&lt;/strong>：分离读写操作，避免修改后立即查询布局属性&lt;/li>
&lt;/ol>
&lt;p>浏览器通过渲染队列合并连续重排，但同步布局API会强制刷新队列。例如连续修改&lt;code>width&lt;/code>后立即获取&lt;code>offsetWidth&lt;/code>，将导致多次重排。&lt;/p>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="3426ad0" class="language-javascript ">
 &lt;code>// 批量DOM操作示例
const fragment = document.createDocumentFragment();
const list = document.getElementById(&amp;#39;list&amp;#39;);

// 创建10个节点（时间复杂度O(n)）
for(let i=0;i&amp;lt;10;i&amp;#43;&amp;#43;){
 const li = document.createElement(&amp;#39;li&amp;#39;);
 li.textContent = `Item ${i}`;
 fragment.appendChild(li); // 内存操作避免多次重排
}

list.appendChild(fragment); // 单次重排

// 读写分离示例（错误 vs 正确）
// 错误写法：触发多次重排
for(let i=0;i&amp;lt;boxes.length;i&amp;#43;&amp;#43;){
 boxes[i].style.width = boxes[i].offsetWidth &amp;#43; 10 &amp;#43; &amp;#39;px&amp;#39;;
}

// 正确写法：批量读取后统一写入
const widths = boxes.map(box =&amp;gt; box.offsetWidth);
boxes.forEach((box, i) =&amp;gt; {
 box.style.width = widths[i] &amp;#43; 10 &amp;#43; &amp;#39;px&amp;#39;;
});&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>复杂度优化&lt;/strong>：批量操作将n次重排降为1次，时间复杂度从O(n)优化至O(1)&lt;/p></description></item><item><title>事件循环与任务队列管理</title><link>https://fe-interview.pangcy.cn/docs/network/network-04/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-04/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考查以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>事件循环机制&lt;/strong>：理解浏览器Event Loop的工作流程及任务队列管理&lt;/li>
&lt;li>&lt;strong>异步任务调度&lt;/strong>：区分宏任务与微任务的执行优先级及嵌套处理&lt;/li>
&lt;li>&lt;strong>渲染管线整合&lt;/strong>：掌握requestAnimationFrame与浏览器渲染流程的协作关系&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点包括：&lt;/p>
&lt;ul>
&lt;li>宏任务(macrotask)与微任务(microtask)的定义与执行顺序&lt;/li>
&lt;li>微任务队列的清空机制及嵌套处理&lt;/li>
&lt;li>requestAnimationFrame在渲染帧中的触发时机&lt;/li>
&lt;li>浏览器渲染流程与事件循环的协作关系&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>Event Loop &amp;gt; 微任务队列 &amp;gt; 宏任务队列 &amp;gt; requestAnimationFrame &amp;gt; 渲染管线&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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;/p>
&lt;ol>
&lt;li>&lt;strong>执行宏任务&lt;/strong>：从宏任务队列取出最老任务（如script整体代码、setTimeout回调）&lt;/li>
&lt;li>&lt;strong>清空微任务队列&lt;/strong>：执行所有微任务（Promise.then、MutationObserver），若微任务中产生新微任务，会持续执行直至队列清空&lt;/li>
&lt;li>&lt;strong>渲染前阶段&lt;/strong>：执行requestAnimationFrame回调&lt;/li>
&lt;li>&lt;strong>渲染流程&lt;/strong>：样式计算 → 布局 → 绘制&lt;/li>
&lt;li>&lt;strong>宏任务循环&lt;/strong>：重复上述过程&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>认为微任务在宏任务之后执行（实际在&lt;strong>当前宏任务结束后立即执行&lt;/strong>）&lt;/li>
&lt;li>忽略微任务队列需要完全清空的特性（嵌套微任务会阻塞渲染）&lt;/li>
&lt;li>混淆requestAnimationFrame与宏/微任务的执行阶段&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>浏览器事件循环按阶段调度任务：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>宏任务阶段&lt;/strong>：执行一个脚本或setTimeout回调等任务&lt;/li>
&lt;li>&lt;strong>微任务阶段&lt;/strong>：立即执行该宏任务产生的所有微任务，包括嵌套微任务&lt;/li>
&lt;li>&lt;strong>渲染准备阶段&lt;/strong>：执行requestAnimationFrame回调&lt;/li>
&lt;li>&lt;strong>渲染阶段&lt;/strong>：处理样式计算、布局与绘制&lt;/li>
&lt;li>&lt;strong>循环触发&lt;/strong>：从宏任务队列取下一个任务&lt;/li>
&lt;/ol>
&lt;p>示例代码解析：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="5aa51b9" class="language-javascript ">
 &lt;code>console.log(&amp;#39;Start&amp;#39;);

setTimeout(() =&amp;gt; console.log(&amp;#39;Timeout&amp;#39;)); // 宏任务

Promise.resolve().then(() =&amp;gt; {
 console.log(&amp;#39;Promise&amp;#39;);
 Promise.resolve().then(() =&amp;gt; console.log(&amp;#39;Nested Promise&amp;#39;)); // 嵌套微任务
});

requestAnimationFrame(() =&amp;gt; console.log(&amp;#39;RAF&amp;#39;));

console.log(&amp;#39;End&amp;#39;);&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>输出顺序：Start → End → Promise → Nested Promise → RAF → Timeout&lt;/p></description></item><item><title>Chrome版本通道特性差异</title><link>https://fe-interview.pangcy.cn/docs/network/network-05/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-05/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>浏览器生态理解&lt;/strong>：对Chrome版本管理策略的认知，体现对现代浏览器开发流程的掌握程度&lt;/li>
&lt;li>&lt;strong>技术风险评估&lt;/strong>：分析不同版本通道的稳定性差异，反映候选人对软件质量控制的理解&lt;/li>
&lt;li>&lt;strong>用户场景分析&lt;/strong>：关联技术特性与目标用户需求，考察产品思维和工程权衡能力&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>版本迭代周期与风险梯度关系&lt;/li>
&lt;li>实验性功能的分阶段发布机制&lt;/li>
&lt;li>不同用户群体对稳定性的容忍阈值&lt;/li>
&lt;li>Chrome的A/B测试策略实现&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>发布通道机制 &amp;gt; 功能灰度发布 &amp;gt; 质量保障体系&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>Chrome采用渐进式发布策略控制风险：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>Canary&lt;/strong>（每日构建）：每日自动构建未验证代码，相当于&lt;strong>代码提交即时镜像&lt;/strong>。包含所有正在开发的功能和API，但存在严重崩溃风险。采用&lt;strong>双二进制机制&lt;/strong>（可与正式版共存）&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Dev&lt;/strong>（每周构建）：经过基础测试的周更版本，承载未来3-4个里程碑的功能。实验性功能需通过&lt;code>chrome://flags&lt;/code>手动开启，适合早期功能验证。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Beta&lt;/strong>（预览版）：每6周与Stable同期发布，提前1个月提供下个稳定版的预览。经过基础质量验证，实验功能基本收敛，企业用户可进行兼容性测试。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Stable&lt;/strong>（稳定版）：经过全量测试的正式版本，实验性API已被移除或默认关闭。通过Chrome Omnibox的A/B测试验证功能接受度。&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>混淆更新频率与功能新鲜度（Dev虽周更但功能早于Canary规划）&lt;/li>
&lt;li>误认为Canary版本经过基础测试（实际直接来自代码提交）&lt;/li>
&lt;li>忽视企业用户选择Beta版的合规需求（比Stable早获得安全更新）&lt;/li>
&lt;/ol>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>Chrome四版本通道的核心差异体现在迭代节奏与质量把控：&lt;/p>
&lt;ul>
&lt;li>
&lt;p>&lt;strong>Canary&lt;/strong>：每日更新，直接反映代码仓库最新状态，包含&lt;strong>未经验证&lt;/strong>的实验功能。目标用户为浏览器内核开发者及需要即时测试前沿特性的技术人员，适合能容忍高频崩溃的场景。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Dev&lt;/strong>：周更版本，经过基础冒烟测试，承载&lt;strong>未来3个月计划上线&lt;/strong>的功能模块。开发者可通过特性开关验证API原型，适合Web应用的前沿兼容性测试。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Beta&lt;/strong>：提前4-6周发布的准稳定版，已完成基础质量验证。企业IT部门用于评估系统兼容性，早期尝鲜用户可通过该版本获取&lt;strong>下个稳定版的核心功能预览&lt;/strong>。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Stable&lt;/strong>：经过全量测试的正式版本，所有功能均通过A/B测试验证。实验性API已被移除或默认禁用，适合普通用户及对稳定性要求极高的生产环境。&lt;/p>
&lt;/li>
&lt;/ul>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="版本选择决策树">版本选择决策树 &lt;a href="#%e7%89%88%e6%9c%ac%e9%80%89%e6%8b%a9%e5%86%b3%e7%ad%96%e6%a0%91" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="049eea3" class="language-javascript ">
 &lt;code>function selectChromeChannel(userType) {
 // 核心决策逻辑
 switch(userType) {
 case &amp;#39;内核开发者&amp;#39;:
 return &amp;#39;Canary&amp;#39;; // 需每日获取最新引擎特性
 case &amp;#39;Web应用开发者&amp;#39;:
 return &amp;#39;Dev&amp;#39;; // 平衡新功能与基本稳定性
 case &amp;#39;企业IT部门&amp;#39;:
 return &amp;#39;Beta&amp;#39;; // 提前发现兼容性问题
 case &amp;#39;普通用户&amp;#39;:
 return &amp;#39;Stable&amp;#39;; // 零崩溃容忍
 default:
 throw new Error(&amp;#39;无效用户类型&amp;#39;);
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="可扩展性建议">可扩展性建议 &lt;a href="#%e5%8f%af%e6%89%a9%e5%b1%95%e6%80%a7%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>企业环境可部署&lt;strong>策略管理&lt;/strong>，强制敏感部门使用Beta版&lt;/li>
&lt;li>开发者工具链可集成Canary版本自动测试，配合异常监控&lt;/li>
&lt;li>低端设备建议锁定Stable版本，避免实验性功能导致性能劣化&lt;/li>
&lt;/ol>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何强制禁用特定实验性API？&lt;/strong>
提示：使用策略模板禁用chrome://flags指定项&lt;/p></description></item><item><title>HTTP协议版本核心特性对比</title><link>https://fe-interview.pangcy.cn/docs/network/network-06/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-06/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>网络协议演进理解&lt;/strong>：是否掌握HTTP协议迭代的核心优化路径&lt;/li>
&lt;li>&lt;strong>性能瓶颈诊断能力&lt;/strong>：能否识别不同版本协议的关键性能缺陷及解决方案&lt;/li>
&lt;li>&lt;strong>底层传输机制认知&lt;/strong>：对TCP/UDP特性差异及队头阻塞等问题的理解&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>管线化与多路复用的本质区别&lt;/li>
&lt;li>HPACK与QPACK头部压缩机制差异&lt;/li>
&lt;li>QUIC协议如何解决传输层队头阻塞&lt;/li>
&lt;li>TLS握手优化与0-RTT特性&lt;/li>
&lt;li>连接迁移的实现原理&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点优先级">关键知识点优先级 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>HTTP/2多路复用 &amp;gt; QUIC协议 &amp;gt; HTTP/1.1管线化 &amp;gt; 头部压缩 &amp;gt; 队头阻塞分层&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>
&lt;p>&lt;strong>HTTP/1.1管线化&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>允许客户端一次性发送多个请求，但&lt;strong>响应必须按请求顺序返回&lt;/strong>&lt;/li>
&lt;li>队头阻塞问题：前序请求响应延迟会阻塞后续所有请求（类似单车道堵车）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>HTTP/2核心改进&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>二进制分帧层&lt;/strong>：将消息分解为独立帧（HEADERS/DATA），实现请求/响应的并行交错传输&lt;/li>
&lt;li>&lt;strong>流优先级&lt;/strong>：支持指定请求处理优先级（如CSS优先于图片）&lt;/li>
&lt;li>&lt;strong>HPACK压缩&lt;/strong>：通过静态/动态字典压缩头部字段（如&amp;quot;:method: GET&amp;quot;编码为1字节）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>HTTP/3革命性变化&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>QUIC协议&lt;/strong>：基于UDP实现可靠传输，解决TCP队头阻塞问题&lt;/li>
&lt;li>&lt;strong>内置加密&lt;/strong>：TLS 1.3握手与连接建立合并，减少RTT&lt;/li>
&lt;li>&lt;strong>连接迁移&lt;/strong>：通过Connection ID保持连接（如WiFi切换蜂窝网络不断连）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>认为HTTP/2彻底解决队头阻塞（实际仅解决应用层阻塞，TCP层阻塞仍存在）&lt;/li>
&lt;li>混淆QPACK与HPACK的依赖关系（QPACK需要QUIC流保证有序）&lt;/li>
&lt;li>误判HTTP/3的普及度（当前CDN支持程度仍需校验）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>从三个维度对比关键特性：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>连接复用&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>HTTP/1.1：单连接顺序处理，管线化易受队头阻塞影响&lt;/li>
&lt;li>HTTP/2：单连接多路复用，应用层帧可交错传输&lt;/li>
&lt;li>HTTP/3：基于QUIC的多路复用，彻底规避TCP队头阻塞&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>头部压缩&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>HTTP/1.1：无压缩，重复传输完整头部&lt;/li>
&lt;li>HTTP/2：HPACK静态/动态字典压缩，需维护帧顺序&lt;/li>
&lt;li>HTTP/3：QPACK通过独立流解决队头阻塞影响&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>传输效率&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>HTTP/1.1：高延迟，低吞吐&lt;/li>
&lt;li>HTTP/2：减少RTT，头部体积降低50%+&lt;/li>
&lt;li>HTTP/3：0-RTT快速连接，改进弱网表现（如丢包率30%仍可用）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="协议选择策略">协议选择策略 &lt;a href="#%e5%8d%8f%e8%ae%ae%e9%80%89%e6%8b%a9%e7%ad%96%e7%95%a5" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="8d6c209" class="language-javascript ">
 &lt;code>// 基于浏览器支持度选择协议版本
function selectProtocol() {
 const supportsHTTP3 = performance.getEntries()
 .some(entry =&amp;gt; entry.nextHopProtocol === &amp;#39;h3&amp;#39;);
 
 return supportsHTTP3 ? &amp;#39;HTTP/3&amp;#39; : 
 &amp;#39;HTTP/2&amp;#39;; // 降级逻辑
}
// 关键优化点注释：
// 1. 使用Performance API检测网络协议支持情况
// 2. 动态降级避免兼容性问题&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="性能优化建议">性能优化建议 &lt;a href="#%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>&lt;strong>移动端优先&lt;/strong>：HTTP/3的连接迁移特性适配网络切换场景&lt;/li>
&lt;li>&lt;strong>关键资源预加载&lt;/strong>：利用HTTP/2流优先级加速首屏&lt;/li>
&lt;li>&lt;strong>头部缓存策略&lt;/strong>：服务端维护动态字典提升压缩率&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何验证当前页面使用的HTTP协议？&lt;/strong>&lt;/p></description></item><item><title>HTTPS加密握手流程解析</title><link>https://fe-interview.pangcy.cn/docs/network/network-07/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-07/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该问题主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>密码学基础&lt;/strong>：对TLS协议核心组件的理解，包括密钥交换机制、证书验证流程、加密算法协商&lt;/li>
&lt;li>&lt;strong>协议细节掌握&lt;/strong>：准确描述TLS握手阶段的核心报文交互顺序及参数传递&lt;/li>
&lt;li>&lt;strong>安全设计理念&lt;/strong>：前向安全的设计原则及其在密钥交换中的具体实现&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>TLS握手阶段交互时序及报文组成&lt;/li>
&lt;li>椭圆曲线迪菲-赫尔曼（ECDHE）密钥交换过程&lt;/li>
&lt;li>X.509证书链验证机制&lt;/li>
&lt;li>前向安全性与临时密钥的关联关系&lt;/li>
&lt;li>主密钥生成与密钥派生过程&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>临时密钥交换（Ephemeral DH/ECDH）&amp;gt; 证书链验证 &amp;gt; 密钥派生函数（HKDF）&lt;/li>
&lt;li>前向安全实现 &amp;gt; 握手报文顺序 &amp;gt; 随机数生成机制&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>TLS握手通过四次关键交互建立安全通道：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>ClientHello&lt;/strong>：客户端发送TLS版本、随机数（ClientRandom）、支持的密码套件列表&lt;/li>
&lt;li>&lt;strong>ServerHello&lt;/strong>：服务端选择协议版本、密码套件（如TLS_ECDHE_RSA_WITH_AES_128_GCM）、生成ServerRandom&lt;/li>
&lt;li>&lt;strong>Certificate&lt;/strong>：发送数字证书链，客户端验证证书签名链、有效期、域名匹配&lt;/li>
&lt;li>&lt;strong>ServerKeyExchange&lt;/strong>：传递ECDHE参数（椭圆曲线类型、服务端临时公钥）&lt;/li>
&lt;li>&lt;strong>ClientKeyExchange&lt;/strong>：客户端生成临时公钥，与服务端参数计算预主密钥（Pre-Master Secret）&lt;/li>
&lt;/ol>
&lt;p>前向安全通过临时密钥实现：服务端每次会话生成唯一的临时密钥对，会话密钥基于临时私钥计算得出。即使长期私钥泄漏，历史会话密钥仍无法被破解。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>混淆RSA密钥交换与DH系列算法的前向安全性差异&lt;/li>
&lt;li>遗漏随机数在密钥生成中的关键作用&lt;/li>
&lt;li>错误认为证书验证只需检查域名匹配&lt;/li>
&lt;/ol>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>TLS 1.2握手流程：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>协商参数&lt;/strong>：客户端发送ClientHello包含协议版本、密码套件候选和ClientRandom。服务端回应ServerHello确认参数并返回ServerRandom&lt;/li>
&lt;li>&lt;strong>身份验证&lt;/strong>：服务端发送证书链，客户端验证证书有效性（颁发机构、有效期、CRL/OCSP）&lt;/li>
&lt;li>&lt;strong>密钥交换&lt;/strong>：服务端通过ServerKeyExchange发送ECDHE参数（椭圆曲线名称、服务端临时公钥）。客户端响应ClientKeyExchange携带客户端临时公钥&lt;/li>
&lt;li>&lt;strong>密钥生成&lt;/strong>：双方通过ECDHE计算共享密钥，结合ClientRandom、ServerRandom生成主密钥，再派生成会话密钥&lt;/li>
&lt;li>&lt;strong>切换加密&lt;/strong>：ChangeCipherSpec通知加密模式切换，Finished报文验证握手完整性&lt;/li>
&lt;/ol>
&lt;p>前向安全性实现：&lt;/p>
&lt;ul>
&lt;li>临时迪菲-赫尔曼（Ephemeral Diffie-Hellman）每次会话生成临时密钥对&lt;/li>
&lt;li>会话密钥= f(临时私钥, 对端公钥, ClientRandom, ServerRandom)&lt;/li>
&lt;li>即使长期私钥泄露，攻击者因缺少历史临时私钥无法回溯会话密钥&lt;/li>
&lt;/ul>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="密钥交换示例nodejs">密钥交换示例（Node.js） &lt;a href="#%e5%af%86%e9%92%a5%e4%ba%a4%e6%8d%a2%e7%a4%ba%e4%be%8bnodejs" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="fe61180" class="language-javascript ">
 &lt;code>const { createECDH, randomBytes } = require(&amp;#39;crypto&amp;#39;);

// 服务端初始化
const serverDH = createECDH(&amp;#39;secp256k1&amp;#39;); 
const serverPublicKey = serverDH.generateKeys();

// Client收到服务端参数后
const clientDH = createECDH(&amp;#39;secp256k1&amp;#39;);
const clientPublicKey = clientDH.generateKeys();

// 计算共享密钥（两端分别计算）
const serverSecret = serverDH.computeSecret(clientPublicKey);
const clientSecret = clientDH.computeSecret(serverPublicKey);

// 密钥派生（伪代码）
const masterSecret = hkdfExpand(
 clientRandom &amp;#43; serverRandom &amp;#43; sharedSecret
);&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化建议">优化建议 &lt;a href="#%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>硬件加速&lt;/strong>：使用支持PCLMULQDQ指令集的CPU加速AES-GCM&lt;/li>
&lt;li>&lt;strong>会话恢复&lt;/strong>：通过Session ID或Session Ticket减少握手开销&lt;/li>
&lt;li>&lt;strong>证书优化&lt;/strong>：采用OCSP Stapling减少验证延迟&lt;/li>
&lt;/ol>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何防止重放攻击&lt;/strong>？&lt;/p></description></item><item><title>强缓存与协商缓存机制</title><link>https://fe-interview.pangcy.cn/docs/network/network-08/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-08/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：浏览器缓存机制理解、HTTP协议掌握程度、性能优化实践能力&lt;/p>
&lt;ol>
&lt;li>&lt;strong>缓存策略区分&lt;/strong>：辨别强缓存与协商缓存的触发条件及交互流程&lt;/li>
&lt;li>&lt;strong>HTTP头部理解&lt;/strong>：解析Cache-Control/Expires与Last-Modified/ETag的工作机制与优先级&lt;/li>
&lt;li>&lt;strong>性能优化思维&lt;/strong>：评估immutable指令对缓存策略的改进价值及应用场景&lt;/li>
&lt;li>&lt;strong>工程实践认知&lt;/strong>：缓存策略在CDN部署、版本管理等场景的应用考量&lt;/li>
&lt;li>&lt;strong>问题排查能力&lt;/strong>：识别常见的缓存配置错误及验证逻辑漏洞&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>Cache-Control &amp;gt; ETag &amp;gt; Last-Modified &amp;gt; Expires&lt;/p>
&lt;h4 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ol>
&lt;li>&lt;strong>强缓存&lt;/strong>&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>通过&lt;code>Cache-Control: max-age=N&lt;/code>或&lt;code>Expires&lt;/code>判断资源新鲜度&lt;/li>
&lt;li>资源未过期时直接返回200 OK (from disk/memory cache)，&lt;strong>不产生网络请求&lt;/strong>&lt;/li>
&lt;li>优先级：&lt;code>Cache-Control&lt;/code> &amp;gt; &lt;code>Expires&lt;/code>（HTTP/1.1规范明确）&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>&lt;strong>协商缓存&lt;/strong>&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>强缓存失效后，携带&lt;code>If-Modified-Since&lt;/code>（对应Last-Modified）或&lt;code>If-None-Match&lt;/code>（对应ETag）发起请求&lt;/li>
&lt;li>服务器通过对比时间戳（Last-Modified）或内容哈希（ETag）判断资源变更&lt;/li>
&lt;li>未变更返回304 Not Modified，&lt;strong>更新本地缓存有效期&lt;/strong>&lt;/li>
&lt;/ul>
&lt;ol start="3">
&lt;li>&lt;strong>Immutable指令&lt;/strong>&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>&lt;code>Cache-Control: immutable&lt;/code>声明资源内容永不变更&lt;/li>
&lt;li>有效期內&lt;strong>跳过协商验证&lt;/strong>，彻底避免304请求，适用于带哈希版本号的静态资源&lt;/li>
&lt;/ul>
&lt;h4 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ul>
&lt;li>混淆&lt;code>no-cache&lt;/code>（强制协商验证）与&lt;code>no-store&lt;/code>（禁止缓存）&lt;/li>
&lt;li>认为ETag可完全替代Last-Modified（实际可并行使用）&lt;/li>
&lt;li>忽略304响应仍需要更新&lt;code>Cache-Control&lt;/code>时效&lt;/li>
&lt;li>在动态资源错误使用immutable导致更新失效&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>浏览器缓存通过两级策略提升性能：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>强缓存&lt;/strong>：&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>检查&lt;code>Cache-Control&lt;/code>/&lt;code>Expires&lt;/code>，未过期直接使用本地缓存&lt;/li>
&lt;li>典型场景：重复访问静态资源（如图片、CSS）&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>&lt;strong>协商缓存&lt;/strong>：&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>资源过期后，携带&lt;code>If-Modified-Since&lt;/code>或&lt;code>If-None-Match&lt;/code>发起请求&lt;/li>
&lt;li>服务器对比资源标识，未变更返回304，节省带宽&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>推荐immutable指令原因&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>彻底消除协商请求，尤其适用于带哈希指纹的静态资源（如&lt;code>app.a3bc4d.js&lt;/code>）&lt;/li>
&lt;li>避免浏览器因用户刷新触发的多余验证（常规缓存策略可能降级验证）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="配置示例nginx">配置示例（Nginx） &lt;a href="#%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8bnginx" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="3ad9ae0" class="language-nginx ">
 &lt;code>location /static/ {
 add_header Cache-Control &amp;#34;public, max-age=31536000, immutable&amp;#34;;
 # 版本化资源设置长期缓存&amp;#43;immutable
 # 非版本化资源应避免使用，防止更新失效
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化建议">优化建议 &lt;a href="#%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>版本分离&lt;/strong>：对内容哈希资源使用immutable，动态资源采用较短max-age&lt;/li>
&lt;li>&lt;strong>兜底机制&lt;/strong>：HTML文件禁用强缓存，确保核心资源更新&lt;/li>
&lt;li>&lt;strong>监控覆盖&lt;/strong>：通过Navigation Timing API统计缓存命中率&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>&lt;strong>如何解决ETag在分布式系统的同步问题？&lt;/strong>&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>提示：使用一致性哈希算法或统一存储ETag生成规则&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>
&lt;p>&lt;strong>用户强制刷新（Ctrl+F5）时的缓存策略变化？&lt;/strong>- 提示：请求头添加&lt;code>Cache-Control: no-cache&lt;/code>绕过强缓存&lt;/p></description></item><item><title>HTTP状态码分类与语义</title><link>https://fe-interview.pangcy.cn/docs/network/network-09/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-09/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>HTTP协议规范理解&lt;/strong>：对状态码分类原则的掌握程度&lt;/li>
&lt;li>&lt;strong>实际场景应用能力&lt;/strong>：不同重定向状态码的具体使用场景区分&lt;/li>
&lt;li>&lt;strong>协议版本演进认知&lt;/strong>：HTTP/1.0与1.1版本对重定向处理的差异&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>状态码类别划分标准（2xx/3xx/4xx/5xx）&lt;/li>
&lt;li>重定向状态码的缓存行为差异&lt;/li>
&lt;li>请求方法在重定向过程中的保持特性&lt;/li>
&lt;li>浏览器与服务器交互的流程控制&lt;/li>
&lt;li>历史版本兼容性问题处理&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>HTTP状态码 &amp;gt; 重定向类型区分 &amp;gt; 请求方法保持 &amp;gt; 缓存策略&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>HTTP状态码采用三位数字编码，首位数字定义响应类别：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>2xx（成功）&lt;/strong>：请求已被服务器接收并处理&lt;/li>
&lt;li>&lt;strong>3xx（重定向）&lt;/strong>：需要客户端执行额外操作以完成请求&lt;/li>
&lt;li>&lt;strong>4xx（客户端错误）&lt;/strong>：请求包含错误语法或无法完成&lt;/li>
&lt;li>&lt;strong>5xx（服务端错误）&lt;/strong>：服务器处理有效请求时失败&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>重定向核心差异&lt;/strong>：&lt;/p>
&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>状态码&lt;/th>
 &lt;th>HTTP版本&lt;/th>
 &lt;th>方法保持&lt;/th>
 &lt;th>缓存行为&lt;/th>
 &lt;th>典型场景&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>301&lt;/td>
 &lt;td>1.0/1&lt;/td>
 &lt;td>可能丢失&lt;/td>
 &lt;td>永久缓存&lt;/td>
 &lt;td>域名迁移&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>302&lt;/td>
 &lt;td>1.0&lt;/td>
 &lt;td>可能丢失&lt;/td>
 &lt;td>不缓存&lt;/td>
 &lt;td>临时维护&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>307&lt;/td>
 &lt;td>1.1&lt;/td>
 &lt;td>严格保持&lt;/td>
 &lt;td>不缓存&lt;/td>
 &lt;td>API重定向&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>认为302默认保持请求方法（实际可能降级为GET）&lt;/li>
&lt;li>混淆301与308的区别（308要求严格保持方法）&lt;/li>
&lt;li>忽略HTTP版本对重定向语义的影响&lt;/li>
&lt;li>误用304（Not Modified）作为重定向状态码&lt;/li>
&lt;/ol>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>HTTP状态码按首位数字分为五大类：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>2xx&lt;/strong>：成功响应（如200 OK表示请求成功）&lt;/li>
&lt;li>&lt;strong>3xx&lt;/strong>：重定向（资源位置变化需客户端跟进）&lt;/li>
&lt;li>&lt;strong>4xx&lt;/strong>：客户端错误（如404 Not Found）&lt;/li>
&lt;li>&lt;strong>5xx&lt;/strong>：服务端故障（如502 Bad Gateway）&lt;/li>
&lt;/ul>
&lt;p>重定向状态码差异：&lt;/p></description></item><item><title>HTTP请求方法语义规范</title><link>https://fe-interview.pangcy.cn/docs/network/network-10/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-10/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考核以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>HTTP协议规范理解&lt;/strong>：准确辨析各请求方法在RFC标准中的定义&lt;/li>
&lt;li>&lt;strong>RESTful设计原则&lt;/strong>：掌握资源操作语义与HTTP方法的对应关系&lt;/li>
&lt;li>&lt;strong>接口安全性设计&lt;/strong>：正确处理幂等性对系统可靠性的影响&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>安全方法(Safe Methods)与副作用的关系&lt;/li>
&lt;li>幂等性(Idempotent)在不同业务场景的表现&lt;/li>
&lt;li>PATCH与PUT在部分更新中的规范差异&lt;/li>
&lt;li>并发控制机制的选择（ETag/版本号）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>HTTP语义规范 &amp;gt; 幂等性判定 &amp;gt; 部分更新设计&lt;/p>
&lt;h4 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ol>
&lt;li>&lt;strong>安全性(Safe)&lt;/strong>：不修改资源的请求方法（GET/HEAD/OPTIONS）。类比查看书籍目录，不会改变书籍内容&lt;/li>
&lt;li>&lt;strong>幂等性(Idempotent)&lt;/strong>：多次相同请求效果等同于单次执行。数学中的幂等运算（如&lt;code>Math.abs(-5)&lt;/code>）&lt;/li>
&lt;li>&lt;strong>PATCH规范&lt;/strong>：RFC 5789定义的部分更新方法，与PUT的整体替换形成对比。类似打补丁与换整件衣服的区别&lt;/li>
&lt;/ol>
&lt;h4 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ul>
&lt;li>误认为幂等性等同于结果一致性（实际上关注的是资源状态变化）&lt;/li>
&lt;li>混淆PUT与PATCH的应用场景（整体替换 vs 部分更新）&lt;/li>
&lt;li>忽略PATCH的非强制幂等性要求（需自行保证操作幂等）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>HTTP方法的核心区别在于：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>安全性&lt;/strong>：仅GET/HEAD/OPTIONS属于安全方法，不会产生副作用&lt;/li>
&lt;li>&lt;strong>幂等性&lt;/strong>：
&lt;ul>
&lt;li>GET/HEAD/OPTIONS/PUT/DELETE具有幂等性&lt;/li>
&lt;li>POST/PATCH不具备强制幂等保证&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;p>PATCH在RESTful设计中的应用要点：&lt;/p>
&lt;ul>
&lt;li>应作为资源局部更新操作的首选方法（如修改用户邮箱）&lt;/li>
&lt;li>需配合条件请求（If-Match头）防止更新丢失问题&lt;/li>
&lt;li>业务层需确保补丁操作自身的幂等性（如使用JSON Patch的&lt;code>test&lt;/code>指令）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="示例用户信息更新api">示例：用户信息更新API &lt;a href="#%e7%a4%ba%e4%be%8b%e7%94%a8%e6%88%b7%e4%bf%a1%e6%81%af%e6%9b%b4%e6%96%b0api" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="9aadb42" class="language-javascript ">
 &lt;code>// PATCH /users/123
// Headers: If-Match: &amp;#34;e123&amp;#34;
{
 &amp;#34;op&amp;#34;: &amp;#34;replace&amp;#34;,
 &amp;#34;path&amp;#34;: &amp;#34;/email&amp;#34;,
 &amp;#34;value&amp;#34;: &amp;#34;new@example.com&amp;#34;
}

// 服务端处理逻辑
app.patch(&amp;#39;/users/:id&amp;#39;, async (req, res) =&amp;gt; {
 const currentETag = await getResourceETag(req.params.id)
 if(req.headers[&amp;#39;if-match&amp;#39;] !== currentETag) {
 return res.status(412).send() // 前置条件失败
 }
 
 try {
 applyPatch(userData, req.body) // 应用JSON Patch
 const newETag = generateNewVersion()
 await saveWithOptimisticLock(userData, newETag)
 } catch (e) {
 // 处理冲突或非法操作
 }
})&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h4 id="可扩展性建议">可扩展性建议 &lt;a href="#%e5%8f%af%e6%89%a9%e5%b1%95%e6%80%a7%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ul>
&lt;li>高频场景：采用差分压缩减少传输数据量&lt;/li>
&lt;li>低端设备：限制补丁操作复杂度，服务端校验操作步骤&lt;/li>
&lt;li>分布式系统：结合向量时钟实现版本控制&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何实现批量操作的幂等性？&lt;/strong>
使用客户端生成唯一请求ID，服务端建立请求日记&lt;/p></description></item><item><title>CDN边缘缓存与资源分发策略</title><link>https://fe-interview.pangcy.cn/docs/network/network-11/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-11/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考核候选人对现代Web性能优化核心方案的理解深度，重点评估以下维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>网络架构理解&lt;/strong>：是否能解释CDN边缘节点拓扑结构与用户地理分布的关联&lt;/li>
&lt;li>&lt;strong>缓存策略掌握&lt;/strong>：是否清楚静态资源预缓存与动态内容路由优化的技术差异&lt;/li>
&lt;li>&lt;strong>性能优化闭环&lt;/strong>：能否将CDN机制与关键性能指标（如FCP、LCP）建立关联&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>边缘节点负载均衡原理&lt;/li>
&lt;li>缓存失效与更新策略（Cache-Control/ETag）&lt;/li>
&lt;li>动态内容加速的TCP协议优化&lt;/li>
&lt;li>首屏渲染关键路径优化&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>DNS智能解析 &amp;gt; 边缘节点缓存层级 &amp;gt; 内容预取策略&lt;/li>
&lt;li>静态资源缓存控制 &amp;gt; 动态内容路由优化 &amp;gt; 边缘计算赋能&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>CDN网络通过&lt;strong>边缘节点分布式部署&lt;/strong>实现物理距离缩短。当用户发起请求时：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>DNS解析阶段&lt;/strong>：基于用户IP的GeoIP库选择最近的POP节点&lt;/li>
&lt;li>&lt;strong>缓存命中判断&lt;/strong>：检查节点是否存在有效缓存（通过Cache-Control/ETag）&lt;/li>
&lt;li>&lt;strong>回源策略&lt;/strong>：未命中时按配置策略（如最少访问）选择上级节点或源站获取资源&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>静态预热&lt;/strong>通过API提前将指定资源推送至全网节点，消除首次访问的MISS惩罚。例如电商活动前预加载商品图片，保障突发流量下的稳定响应。&lt;/p>
&lt;p>&lt;strong>动态加速&lt;/strong>采用协议优化（如QUIC代替TCP）、链路择优（实时测速选择最优路由）、请求聚合（合并API调用）等技术。通过边缘节点的TCP连接复用，减少SSL握手耗时，提升动态接口响应速度。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>认为所有类型内容都适合CDN缓存（如需要实时计算的场景）&lt;/li>
&lt;li>忽略Vary头对缓存分片的影响（如移动端场景需要区分UA）&lt;/li>
&lt;li>误用Cache-Control: max-age导致版本更新延迟&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>CDN通过全球分布的边缘节点构建&lt;strong>缓存网络层&lt;/strong>，基于用户地理位置智能路由至最优节点。&lt;strong>静态资源预热&lt;/strong>通过预推送消除冷启动延迟，&lt;strong>动态内容加速&lt;/strong>通过协议优化降低传输耗时。首屏加载时，关键CSS/JS等静态资源从边缘节点快速加载（降低RTT），动态数据通过优化路由减少TTFB，整体缩短渲染关键路径。&lt;/p>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="缓存配置示例">缓存配置示例 &lt;a href="#%e7%bc%93%e5%ad%98%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="d93fe30" class="language-nginx ">
 &lt;code># CDN边缘节点配置
location ~* \.(js|css)$ {
 add_header Cache-Control &amp;#34;public, max-age=31536000&amp;#34;;
 etag on;
 if_modified_since exact;
}

location /api {
 proxy_cache_bypass $http_cache_control;
 proxy_cache_key &amp;#34;$scheme$request_method$host$request_uri$http_x_user_token&amp;#34;;
 proxy_cache_valid 200 10s;
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>注释说明：&lt;/p></description></item><item><title>浏览器多级缓存层级结构</title><link>https://fe-interview.pangcy.cn/docs/network/network-12/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-12/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：浏览器缓存机制理解、离线应用架构设计、存储方案选型能力&lt;/p>
&lt;ul>
&lt;li>&lt;strong>技术评估点&lt;/strong>：&lt;/li>
&lt;/ul>
&lt;ol>
&lt;li>各级缓存容量限制的定量理解（如Memory Cache与Disk Cache的存储上限差异）&lt;/li>
&lt;li>不同缓存生命周期管理（内存释放机制、磁盘持久化策略）&lt;/li>
&lt;li>Service Worker缓存与HTTP缓存的协同优先级&lt;/li>
&lt;li>离线场景下多级缓存的回退策略&lt;/li>
&lt;li>缓存更新机制与版本控制&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>Service Worker Cache &amp;gt; HTTP Cache（Disk/Memory）&amp;gt; 网络请求&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>Memory Cache&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>容量：50-300MB（与设备内存相关），存储高频小资源（如CSS/JS）&lt;/li>
&lt;li>生命周期：随页面进程销毁，刷新时可能保留（后退导航）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>Disk Cache&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>容量：5%磁盘空间（通常GB级），存储低频大文件（如图片）&lt;/li>
&lt;li>生命周期：遵循&lt;code>Cache-Control&lt;/code>头（max-age）、手动清除时失效&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>Service Worker Cache&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>容量：浏览器分配独立配额（通常50MB/域名），通过&lt;code>caches&lt;/code>API管理&lt;/li>
&lt;li>生命周期：持久化存储，需代码显式清理，支持版本控制&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>协同机制&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>请求优先检查Service Worker缓存（若注册）&lt;/li>
&lt;li>Service Worker可自定义策略（网络优先/ache优先）&lt;/li>
&lt;li>未命中时依次查找Memory -&amp;gt; Disk Cache&lt;/li>
&lt;li>最终回退到网络请求并更新缓存&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>常见误区&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>混淆&lt;code>Cache-Control: no-store&lt;/code>与&lt;code>no-cache&lt;/code>导致意外缓存&lt;/li>
&lt;li>忽略Service Worker需要HTTPS环境&lt;/li>
&lt;li>内存缓存可能跳过&lt;code>304&lt;/code>验证&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>浏览器多级缓存体系通过分层存储优化性能：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>Memory Cache&lt;/strong>作为内存级缓存（约50-300MB），主要用于存储当前会话高频资源，随页面关闭释放。&lt;/li>
&lt;li>&lt;strong>Disk Cache&lt;/strong>基于HTTP缓存头（如Cache-Control）持久化存储（GB级），适用于低频大文件，可跨会话保留。&lt;/li>
&lt;li>&lt;strong>Service Worker Cache&lt;/strong>提供编程式缓存（约50MB/域），支持离线优先策略，通过&lt;code>fetch&lt;/code>事件拦截请求实现精准控制。&lt;/li>
&lt;/ol>
&lt;p>离线协同流程：&lt;/p>
&lt;ul>
&lt;li>Service Worker注册后拦截请求，优先返回缓存副本&lt;/li>
&lt;li>网络不可用时，依次尝试Disk Cache -&amp;gt; Memory Cache&lt;/li>
&lt;li>后台同步更新机制确保数据时效性&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="缓存策略配置示例">缓存策略配置示例 &lt;a href="#%e7%bc%93%e5%ad%98%e7%ad%96%e7%95%a5%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="92e0979" class="language-javascript ">
 &lt;code>// Service Worker安装阶段缓存核心资源
self.addEventListener(&amp;#39;install&amp;#39;, (event) =&amp;gt; {
 event.waitUntil(
 caches.open(&amp;#39;v1&amp;#39;).then((cache) =&amp;gt; {
 return cache.addAll([
 &amp;#39;/styles/main.css&amp;#39;,
 &amp;#39;/scripts/app.js&amp;#39;,
 &amp;#39;/assets/logo.png&amp;#39;
 ])
 })
 )
});

// 缓存优先策略
self.addEventListener(&amp;#39;fetch&amp;#39;, (event) =&amp;gt; {
 event.respondWith(
 caches.match(event.request)
 .then((cached) =&amp;gt; {
 // 返回缓存或回退网络
 return cached || fetch(event.request)
 .then((response) =&amp;gt; {
 // 动态缓存非核心资源
 if(response.ok) caches.open(&amp;#39;v1&amp;#39;).put(event.request, response.clone());
 return response;
 });
 })
 )
});&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="可扩展性优化">可扩展性优化 &lt;a href="#%e5%8f%af%e6%89%a9%e5%b1%95%e6%80%a7%e4%bc%98%e5%8c%96" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>&lt;strong>容量预警&lt;/strong>：监控&lt;code>navigator.storage.estimate()&lt;/code>实现配额告警&lt;/li>
&lt;li>&lt;strong>缓存清理&lt;/strong>：LRU算法维护缓存空间&lt;/li>
&lt;li>&lt;strong>降级策略&lt;/strong>：低端设备禁用非核心缓存&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" 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="#%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e7%bc%93%e5%ad%98%e7%89%88%e6%9c%ac%e7%81%b0%e5%ba%a6%e6%9b%b4%e6%96%b0" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>通过Service Worker版本号分阶段激活，配合IndexedDB存储用户分组标识&lt;/p></description></item><item><title>Nginx缓存配置与失效机制</title><link>https://fe-interview.pangcy.cn/docs/network/network-13/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-13/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：&lt;br>
本题考察候选人对Nginx缓存系统的实战理解与调优能力，重点评估：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>反向代理缓存架构设计能力&lt;/strong>：通过&lt;code>proxy_cache_path&lt;/code>配置实现资源分级存储&lt;/li>
&lt;li>&lt;strong>缓存策略精细化控制&lt;/strong>：基于业务场景定制缓存键(cache_key)的能力&lt;/li>
&lt;li>&lt;strong>缓存生命周期管理&lt;/strong>：主动失效机制实现与安全防护意识&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>技术评估点&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>&lt;code>proxy_cache_path&lt;/code>参数含义与存储结构设计&lt;/li>
&lt;li>多维度缓存键的变量组合策略&lt;/li>
&lt;li>purge模块的请求处理流程与权限控制&lt;/li>
&lt;li>缓存失效的多场景处理（被动失效/主动清除）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>proxy_cache_path &amp;gt; 缓存键定制 &amp;gt; purge模块 &amp;gt; 失效策略&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>
&lt;p>&lt;strong>存储配置&lt;/strong>：&lt;br>
&lt;code>proxy_cache_path&lt;/code>定义缓存文件存储路径与内存元数据区，通过&lt;code>levels&lt;/code>参数实现哈希目录分级存储（类似文件系统inode设计），&lt;code>keys_zone&lt;/code>在共享内存中维护缓存索引加速查找，&lt;code>inactive&lt;/code>控制缓存存活时间（LRU淘汰机制）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>缓存键策略&lt;/strong>：&lt;br>
默认键值包含&lt;code>$scheme$proxy_host$request_uri&lt;/code>，可通过&lt;code>proxy_cache_key&lt;/code>指令扩展维度。例如电商场景中追加&lt;code>$http_user_agent&lt;/code>实现移动/PC端缓存隔离：&lt;/p>
&lt;/li>
&lt;/ol>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="81dc0af" class="language-nginx ">
 &lt;code>proxy_cache_key &amp;#34;$scheme$host$request_uri$http_user_agent&amp;#34;;&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;ol start="3">
&lt;li>&lt;strong>主动清除原理&lt;/strong>：&lt;br>
通过第三方&lt;code>ngx_cache_purge&lt;/code>模块实现，当收到&lt;code>PURGE&lt;/code>请求时，Nginx根据请求URL构造缓存键，在内存元数据区和磁盘文件系统中删除对应条目。需严格限制访问权限防止恶意清除：&lt;/li>
&lt;/ol>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="1e4bd8e" class="language-nginx ">
 &lt;code>location ~ /purge(/.*) {
 allow 192.168.0.0/24; # IP白名单
 deny all;
 proxy_cache_purge CACHE_ZONE $1$is_args$args;
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误认为缓存键默认包含所有URL参数（实际需显式配置&lt;code>$args&lt;/code>）&lt;/li>
&lt;li>混淆&lt;code>inactive&lt;/code>与&lt;code>proxy_cache_valid&lt;/code>的时间控制（前者是访问保留期，后者是缓存有效期）&lt;/li>
&lt;li>purge请求未做IP限制导致安全漏洞&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>&lt;strong>配置示例&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="203e0ad" class="language-nginx ">
 &lt;code>http {
 proxy_cache_path /data/nginx/cache 
 levels=1:2 
 keys_zone=my_cache:10m 
 max_size=10g 
 inactive=60m 
 use_temp_path=off;

 server {
 location / {
 proxy_cache my_cache;
 proxy_cache_key &amp;#34;$host$uri$args$http_user_agent&amp;#34;; # 复合键
 proxy_cache_valid 200 302 10m; # 动态内容缓存
 proxy_cache_valid 404 1m; # 错误页面短时缓存
 
 proxy_pass http://backend;
 }

 location ~ /purge(/.*) {
 allow 10.0.0.0/8; # 内网权限控制
 deny all;
 proxy_cache_purge my_cache $1$is_args$args;
 }
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="编码示例">编码示例 &lt;a href="#%e7%bc%96%e7%a0%81%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="bf2156e" class="language-nginx ">
 &lt;code># 多级缓存目录结构优化IO
proxy_cache_path /data/nginx/cache 
 levels=1:2 # 目录层级：1级子目录名长度1字符，2级长度2字符
 keys_zone=api_cache:100m # 100MB内存存储缓存键
 max_size=50g # 磁盘最大50GB
 inactive=12h # 12小时无访问则失效
 use_temp_path=off; # 避免临时目录性能损耗

location /api {
 proxy_cache api_cache;
 
 # 精细化缓存键：用户类型&amp;#43;请求路径&amp;#43;参数
 proxy_cache_key &amp;#34;$http_x_user_type$uri$args&amp;#34;;
 
 # 差异化缓存策略
 proxy_cache_valid 200 206 304 10m;
 proxy_cache_valid any 1m; # 其他状态码
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="可扩展性建议">可扩展性建议 &lt;a href="#%e5%8f%af%e6%89%a9%e5%b1%95%e6%80%a7%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>大流量场景&lt;/strong>：&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>使用hash分片存储（通过&lt;code>proxy_cache_path&lt;/code>的&lt;code>levels&lt;/code>参数）&lt;/li>
&lt;li>启用&lt;code>proxy_cache_revalidate&lt;/code>使用If-Modified-Since验证陈旧资源&lt;/li>
&lt;/ul>
&lt;ol start="2">
&lt;li>&lt;strong>低端设备&lt;/strong>：&lt;/li>
&lt;/ol>
&lt;ul>
&lt;li>降低内存占用：缩小&lt;code>keys_zone&lt;/code>尺寸同时增加&lt;code>max_size&lt;/code>磁盘配额&lt;/li>
&lt;li>启用&lt;code>proxy_cache_use_stale&lt;/code>在源站故障时响应陈旧缓存&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何监控缓存命中率？&lt;/strong>&lt;br>
回答提示：通过&lt;code>$upstream_cache_status&lt;/code>变量记录日志，分析HIT/MISS/EXPIRED等状态&lt;/p></description></item><item><title>ETag与Last-Modified校验对比</title><link>https://fe-interview.pangcy.cn/docs/network/network-14/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-14/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察候选人对HTTP缓存验证机制的核心理解与工程权衡能力，重点评估以下维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>缓存机制原理&lt;/strong>：对条件请求（Conditional Requests）中两种校验方式的工作机制理解&lt;/li>
&lt;li>&lt;strong>精度差异辨析&lt;/strong>：对比时间戳校验与内容指纹校验的检测颗粒度差异&lt;/li>
&lt;li>&lt;strong>强弱校验区别&lt;/strong>：理解强校验（Strong Validation）与弱校验（Weak Validation）的应用场景&lt;/li>
&lt;li>&lt;strong>性能权衡意识&lt;/strong>：分析服务端计算开销与缓存命中率的平衡点&lt;/li>
&lt;li>&lt;strong>HTTP协议规范&lt;/strong>：对&lt;code>ETag&lt;/code>响应头格式与验证流程的掌握程度&lt;/li>
&lt;/ol>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>Last-Modified校验&lt;/strong>：基于文件修改时间的秒级校验&lt;/li>
&lt;li>&lt;strong>ETag强校验&lt;/strong>：基于内容哈希值的字节级校验（如&lt;code>&amp;quot;123456&amp;quot;&lt;/code>）&lt;/li>
&lt;li>&lt;strong>ETag弱校验&lt;/strong>：基于资源语义变化的校验（如&lt;code>W/&amp;quot;123&amp;quot;&lt;/code>）&lt;/li>
&lt;li>&lt;strong>验证流程&lt;/strong>：客户端通过&lt;code>If-Modified-Since&lt;/code>和&lt;code>If-None-Match&lt;/code>请求头传递验证令牌&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>Last-Modified校验&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>服务端返回资源的最后修改时间（如&lt;code>Last-Modified: Tue, 01 Jan 2024 nbsp;00:00:00 GMT&lt;/code>）&lt;/li>
&lt;li>客户端下次请求携带该时间，服务端对比文件系统时间戳&lt;/li>
&lt;li>问题：1秒内多次修改无法检测；文件内容未变但时间戳被修改（如备份操作）会导致缓存失效&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>ETag校验&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>强ETag（无&lt;code>W/&lt;/code>前缀）：要求字节完全一致。通过哈希算法（如MD5）或版本号生成&lt;/li>
&lt;li>弱ETag（带&lt;code>W/&lt;/code>前缀）：允许非实质性变化（如HTML注释修改）。通过关键元数据生成&lt;/li>
&lt;li>客户端请求时携带&lt;code>If-None-Match&lt;/code>头部，服务端进行哈希值比对&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>认为Last-Modified的时间精度可以达到毫秒级（实际HTTP日期格式只支持秒级）&lt;/li>
&lt;li>误将弱校验ETag用于需要严格缓存验证的场景&lt;/li>
&lt;li>忽视ETag生成算法可能引发的集群服务器一致性难题&lt;/li>
&lt;li>认为ETag必须使用哈希算法（实际上可采用版本号等机制）&lt;/li>
&lt;/ol>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>Last-Modified与ETag的核心差异体现在检测维度和计算方式：&lt;/p>
&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>维度&lt;/th>
 &lt;th>Last-Modified&lt;/th>
 &lt;th>ETag&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>检测依据&lt;/td>
 &lt;td>文件系统时间戳（秒级）&lt;/td>
 &lt;td>内容哈希/版本号（字节级）&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>修改检测&lt;/td>
 &lt;td>时间变化即失效&lt;/td>
 &lt;td>内容变化才失效&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>计算成本&lt;/td>
 &lt;td>读取文件属性（低开销）&lt;/td>
 &lt;td>计算哈希值（高开销）&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>典型场景&lt;/td>
 &lt;td>静态资源版本稳定&lt;/td>
 &lt;td>需要精确缓存控制&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;p>&lt;strong>ETag更精准的原因&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>直接校验内容而非时间，避免时间篡改导致的误判&lt;/li>
&lt;li>弱校验可过滤无实质影响的修改（如CDN添加注释）&lt;/li>
&lt;li>支持集群环境下的版本同步（如版本号ETag）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>计算开销考量&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>大文件哈希计算消耗CPU资源（需流式计算优化）&lt;/li>
&lt;li>动态内容需实时生成ETag增加延迟&lt;/li>
&lt;li>分布式系统需保持ETag生成算法一致性&lt;/li>
&lt;/ul>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="优化etag生成nodejs示例">优化ETag生成（Node.js示例） &lt;a href="#%e4%bc%98%e5%8c%96etag%e7%94%9f%e6%88%90nodejs%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="18e8a77" class="language-javascript ">
 &lt;code>const crypto = require(&amp;#39;crypto&amp;#39;);
const fs = require(&amp;#39;fs&amp;#39;);

// 流式生成强ETag（SHA256哈希）
function generateStrongETag(filePath) {
 return new Promise((resolve) =&amp;gt; {
 const hash = crypto.createHash(&amp;#39;sha256&amp;#39;);
 fs.createReadStream(filePath)
 .on(&amp;#39;data&amp;#39;, (chunk) =&amp;gt; hash.update(chunk))
 .on(&amp;#39;end&amp;#39;, () =&amp;gt; resolve(hash.digest(&amp;#39;hex&amp;#39;)));
 });
}

// 弱ETag生成（文件大小&amp;#43;修改时间）
function generateWeakETag(filePath) {
 const stats = fs.statSync(filePath);
 return `W/&amp;#34;${stats.size}-${stats.mtimeMs}&amp;#34;`;
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>优化策略&lt;/strong>：&lt;/p></description></item><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><item><title>TCP三次握手与四次挥手</title><link>https://fe-interview.pangcy.cn/docs/network/network-16/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-16/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察以下核心能力：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>TCP协议原理掌握&lt;/strong>：深入理解连接建立与断开机制在可靠传输中的作用&lt;/li>
&lt;li>&lt;strong>状态机转换能力&lt;/strong>：准确描述客户端与服务端在各阶段的TCP状态变迁&lt;/li>
&lt;li>&lt;strong>网络异常处理思维&lt;/strong>：理解TIME_WAIT状态的设计意图及网络可靠性保障机制&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>SYN/SYN-ACK/ACK标志位的交互逻辑&lt;/li>
&lt;li>序列号同步机制与可靠性保障&lt;/li>
&lt;li>四次挥手比三次握手多一次的根本原因&lt;/li>
&lt;li>TIME_WAIT状态的作用与MSL计算逻辑&lt;/li>
&lt;li>状态迁移路径的正确性（如SYN_SENT到ESTABLISHED的转换条件）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>三次握手建立连接&lt;/li>
&lt;li>四次挥手终止连接&lt;/li>
&lt;li>TIME_WAIT状态机制&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>（类比租房签约）：&lt;/p>
&lt;ol>
&lt;li>客户端发送SYN（SYN=1, seq=x）进入SYN_SENT状态&lt;/li>
&lt;li>服务端返回SYN-ACK（SYN=1, ACK=1, seq=y, ack=x+1）进入SYN_RCVD&lt;/li>
&lt;li>客户端发送ACK（ACK=1, ack=y+1）进入ESTABLISHED，服务端收到后同步进入ESTABLISHED&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>四次挥手过程&lt;/strong>（类比解约流程）：&lt;/p>
&lt;ol>
&lt;li>主动方发送FIN（FIN=1, seq=u）进入FIN_WAIT_1&lt;/li>
&lt;li>被动方返回ACK（ACK=1, ack=u+1）进入CLOSE_WAIT&lt;/li>
&lt;li>被动方发送FIN（FIN=1, seq=v）进入LAST_ACK&lt;/li>
&lt;li>主动方返回ACK（ACK=1, ack=v+1）进入TIME_WAIT，等待2MSL后关闭&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>TIME_WAIT必要性&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>确保被动方正确进入CLOSED状态（处理重传的FIN）&lt;/li>
&lt;li>消除网络中残留报文（防止旧连接数据污染新连接）&lt;/li>
&lt;li>默认等待2*MSL（Maximum Segment Lifetime），确保所有报文消亡&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>误认为服务端不会出现TIME_WAIT（主动关闭方都会产生）&lt;/li>
&lt;li>混淆FIN_WAIT_2与CLOSING状态的区别&lt;/li>
&lt;li>错误理解序列号增长逻辑（ACK确认的是期望的下个序列号）&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>TCP通过三次握手建立可靠连接：&lt;/p>
&lt;ol>
&lt;li>客户端发送SYN（seq=x）进入SYN_SENT&lt;/li>
&lt;li>服务端返回SYN-ACK（seq=y, ack=x+1）进入SYN_RCVD&lt;/li>
&lt;li>客户端确认ACK（ack=y+1）后双方进入ESTABLISHED&lt;/li>
&lt;/ol>
&lt;p>连接终止需四次挥手：&lt;/p>
&lt;ol>
&lt;li>主动方发送FIN（seq=u）进入FIN_WAIT_1&lt;/li>
&lt;li>被动方ACK确认后进入CLOSE_WAIT，主动方进入FIN_WAIT_2&lt;/li>
&lt;li>被动方发送FIN（seq=v）后进入LAST_ACK&lt;/li>
&lt;li>主动方ACK确认并进入TIME_WAIT，2MSL超时后关闭&lt;/li>
&lt;/ol>
&lt;p>TIME_WAIT状态确保：&lt;/p>
&lt;ul>
&lt;li>可靠终止连接（处理延迟的FIN重传）&lt;/li>
&lt;li>避免旧连接报文干扰新连接（2MSL足以让网络报文过期）&lt;/li>
&lt;li>保证被动关闭方能正常结束（防备最终ACK丢失）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>为什么SYN要消耗序列号？&lt;/strong>
确保后续数据顺序，防止历史SYN干扰&lt;/p></description></item><item><title>TCP与UDP协议特性对比</title><link>https://fe-interview.pangcy.cn/docs/network/network-17/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-17/</guid><description>&lt;h2 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;/h2>&lt;h3 id="核心能力维度">核心能力维度 &lt;a href="#%e6%a0%b8%e5%bf%83%e8%83%bd%e5%8a%9b%e7%bb%b4%e5%ba%a6" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>本题主要考察候选人对传输层协议本质特性及适用场景的理解能力，重点评估以下技术维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>协议特性理解&lt;/strong>：TCP/UDP核心机制差异的掌握程度&lt;/li>
&lt;li>&lt;strong>场景化选型能力&lt;/strong>：如何根据业务需求选择传输协议&lt;/li>
&lt;li>&lt;strong>性能权衡意识&lt;/strong>：对可靠性与传输效率的取舍判断&lt;/li>
&lt;/ol>
&lt;h3 id="具体技术评估点">具体技术评估点 &lt;a href="#%e5%85%b7%e4%bd%93%e6%8a%80%e6%9c%af%e8%af%84%e4%bc%b0%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>连接建立方式（三次握手 vs 无连接）&lt;/li>
&lt;li>可靠性保障机制（确认重传 vs 尽最大努力交付）&lt;/li>
&lt;li>数据包传输模式（流式传输 vs 数据报文）&lt;/li>
&lt;li>首部开销差异（20-60字节 vs 8字节）&lt;/li>
&lt;li>典型应用场景匹配原则&lt;/li>
&lt;/ol>
&lt;h2 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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>可靠性机制 &amp;gt; 传输效率 &amp;gt; 连接管理 &amp;gt; 头部开销&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>TCP（传输控制协议）&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>面向连接的可靠传输（三次握手建立连接）&lt;/li>
&lt;li>通过序列号、确认应答、超时重传实现数据完整性&lt;/li>
&lt;li>流量控制（滑动窗口）和拥塞控制（慢启动/快恢复）&lt;/li>
&lt;li>全双工字节流传输，保证数据顺序&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>UDP（用户数据报协议）&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>无连接不可靠传输（直接发送数据包）&lt;/li>
&lt;li>无重传机制，不保证数据顺序&lt;/li>
&lt;li>首部仅8字节（源端口/目标端口/长度/校验和）&lt;/li>
&lt;li>支持广播/多播传输模式&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>认为UDP完全不安全（可通过应用层实现可靠性）&lt;/li>
&lt;li>混淆数据可靠性与传输可靠性（TCP保证后者）&lt;/li>
&lt;li>忽视TCP头部开销对传输效率的影响&lt;/li>
&lt;/ol>
&lt;h2 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;/h2>&lt;p>TCP与UDP核心差异：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>可靠性&lt;/strong>：TCP通过确认重传机制保证数据可靠到达，UDP不提供传输保障&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>传输效率&lt;/strong>：UDP无连接建立和确认过程，首部开销小，实时性更优&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>连接方式&lt;/strong>：TCP需要三次握手建立端到端连接，UDP直接发送数据报&lt;/p>
&lt;/li>
&lt;/ol>
&lt;p>场景选型示例：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>视频流媒体（UDP）&lt;/strong>：容忍少量丢包，优先保证低延迟。如WebRTC使用UDP传输实时视频，配合前向纠错（FEC）补偿丢包&lt;/li>
&lt;li>&lt;strong>金融交易（TCP）&lt;/strong>：要求100%数据准确，如支付系统必须使用TCP确保交易数据完整到达，避免金额错乱&lt;/li>
&lt;/ul>
&lt;h2 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;/h2>&lt;h3 id="udp视频传输优化方案">UDP视频传输优化方案 &lt;a href="#udp%e8%a7%86%e9%a2%91%e4%bc%a0%e8%be%93%e4%bc%98%e5%8c%96%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;div class="prism-codeblock ">
 &lt;pre id="5831493" class="language-javascript ">
 &lt;code>// UDP视频传输伪代码示例
class VideoStreamer {
 constructor() {
 this.socket = new UDPSocket();
 this.fec = new ForwardErrorCorrection(); // 前向纠错
 }

 sendFrame(frameData) {
 const packets = this.fec.encode(frameData); // 添加冗余数据包
 packets.forEach(packet =&amp;gt; {
 this.socket.send(packet); // 不等待ACK直接发送
 });
 }

 handleLoss(lostPackets) {
 // 使用NACK协议请求关键帧重传
 if (this.isKeyFrame(lostPackets)) {
 this.requestRetransmission(lostPackets);
 }
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>优化方案&lt;/strong>：&lt;/p></description></item><item><title>滑动窗口与流量控制</title><link>https://fe-interview.pangcy.cn/docs/network/network-18/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-18/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该问题考察候选人对TCP协议核心机制的理解深度及系统化思维能力，主要评估：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>流量控制原理&lt;/strong>：滑动窗口与接收窗口（RWND）动态调节机制&lt;/li>
&lt;li>&lt;strong>拥塞控制算法&lt;/strong>：慢启动/拥塞避免阶段的窗口调整逻辑&lt;/li>
&lt;li>&lt;strong>协议协同机制&lt;/strong>：ACK确认、窗口通告与拥塞窗口（CWND）的交互关系&lt;/li>
&lt;li>&lt;strong>动态适应能力&lt;/strong>：网络带宽变化时的算法响应策略&lt;/li>
&lt;li>&lt;strong>概念区分能力&lt;/strong>：流量控制（接收方驱动）与拥塞控制（网络状况驱动）的本质差异&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>接收窗口（RWND）与拥塞窗口（CWND）&lt;/li>
&lt;li>累积确认与滑动窗口推进&lt;/li>
&lt;li>慢启动阈值（ssthresh）与AIMD原则&lt;/li>
&lt;li>三重重复ACK与超时重传机制&lt;/li>
&lt;/ol>
&lt;h3 id="核心机制">核心机制 &lt;a href="#%e6%a0%b8%e5%bf%83%e6%9c%ba%e5%88%b6" 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;/p>
&lt;ul>
&lt;li>接收方通过TCP头部的窗口字段通告剩余缓冲区大小（RWND）&lt;/li>
&lt;li>发送方维护发送窗口大小 = min(RWND, CWND)&lt;/li>
&lt;li>通过累积确认机制（如ACK 3001表示3000及之前字节已接收）推进窗口&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>拥塞控制&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="697b21d" class="language-bash ">
 &lt;code>慢启动阶段（SS）：
 CWND指数增长（每RTT翻倍）
 触发条件：连接建立或超时重传
 
拥塞避免（CA）：
 CWND线性增长（每RTT &amp;#43;1 MSS）
 触发条件：CWND &amp;gt;= ssthresh

快速恢复（FR）：
 在收到3个重复ACK时
 ssthresh = max( 未确认数据量/2, 2*MSS )
 CWND = ssthresh &amp;#43; 3*MSS&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>混淆RWND（接收方控制）与CWND（发送方控制）&lt;/li>
&lt;li>误以为窗口大小通告只能通过ACK报文传递（实际可单独发送窗口更新）&lt;/li>
&lt;li>未能区分丢包场景处理：三重ACK触发快速重传 vs 超时触发慢启动&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>TCP通过&lt;strong>接收窗口通告&lt;/strong>实现流量控制：接收方在ACK报文中携带当前可用缓冲区大小，发送方据此限制最大发送量。同时，&lt;strong>拥塞控制算法&lt;/strong>动态调整拥塞窗口：慢启动阶段指数增长探测带宽，达到阈值后转为线性增长的拥塞避免。两者共同约束实际发送窗口（取RWND与CWND较小值）。&lt;/p>
&lt;p>当网络拥塞时（超时或收到3个重复ACK），通过降低CWND和ssthresh来收敛发送速率。例如超时重传会重置CWND=1 MSS，而快速恢复阶段仍保持较高传输速率。这种双重控制机制使TCP能在保证可靠性的同时，最大化网络吞吐量。&lt;/p>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="动态窗口调节伪代码">动态窗口调节伪代码 &lt;a href="#%e5%8a%a8%e6%80%81%e7%aa%97%e5%8f%a3%e8%b0%83%e8%8a%82%e4%bc%aa%e4%bb%a3%e7%a0%81" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="3124138" class="language-javascript ">
 &lt;code>class TCPSender {
 constructor() {
 this.cwnd = 1; // 初始拥塞窗口
 this.ssthresh = Infinity;
 }

 // 收到ACK时的处理
 handleAck(ackNum, rwnd) {
 const bytesInFlight = this.lastSent - ackNum;
 
 // 滑动窗口推进
 this.sendWindow = Math.min(rwnd, this.cwnd);
 
 // 拥塞控制
 if (this.cwnd &amp;lt; this.ssthresh) {
 this.cwnd *= 2; // 慢启动
 } else {
 this.cwnd &amp;#43;= 1; // 拥塞避免
 }
 }

 // 检测丢包处理
 handlePacketLoss(type) {
 if(type === &amp;#39;TIMEOUT&amp;#39;) {
 this.ssthresh = Math.max(this.cwnd/2, 2);
 this.cwnd = 1;
 } else if(type === &amp;#39;3_DUP_ACK&amp;#39;) {
 this.ssthresh = Math.max(this.cwnd/2, 2);
 this.cwnd = this.ssthresh &amp;#43; 3;
 }
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化策略">优化策略 &lt;a href="#%e4%bc%98%e5%8c%96%e7%ad%96%e7%95%a5" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>带宽延迟积适应&lt;/strong>：动态调整窗口上限以适应网络环境&lt;/li>
&lt;li>&lt;strong>ECN显式拥塞通知&lt;/strong>：配合路由器的显式拥塞标记&lt;/li>
&lt;li>&lt;strong>HyStart算法&lt;/strong>：改进的慢启动减少突发丢包&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;p>&lt;strong>Q1：TCP如何区分网络拥塞和链路故障？&lt;/strong>
通过超时重传次数判断，连续超时可能为链路中断&lt;/p></description></item><item><title>网络分层模型核心职责</title><link>https://fe-interview.pangcy.cn/docs/network/network-19/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-19/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>网络协议体系理解&lt;/strong>：对分层模型的抽象能力及实际协议栈对应关系的把握&lt;/li>
&lt;li>&lt;strong>协议分层原理&lt;/strong>：不同网络层级的功能隔离与协作机制&lt;/li>
&lt;li>&lt;strong>数据封装过程&lt;/strong>：报文在协议栈中的逐层封装逻辑&lt;/li>
&lt;/ol>
&lt;p>具体评估点包括：&lt;/p>
&lt;ul>
&lt;li>OSI模型与TCP/IP模型的层级对应关系&lt;/li>
&lt;li>各层级核心协议的功能边界（如TCP的可靠传输与IP的路由选择）&lt;/li>
&lt;li>协议头部信息的逐层封装顺序&lt;/li>
&lt;li>典型协议归属层级的辨识能力（如ARP属于链路层）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>OSI/TCP模型对应 &amp;gt; 层级核心功能 &amp;gt; 协议封装顺序 &amp;gt; 典型协议归属&lt;/p>
&lt;h3 id="模型对应关系">模型对应关系 &lt;a href="#%e6%a8%a1%e5%9e%8b%e5%af%b9%e5%ba%94%e5%85%b3%e7%b3%bb" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>TCP/IP四层模型将OSI模型的&lt;strong>应用层、表示层、会话层&lt;/strong>合并为&lt;strong>应用层&lt;/strong>，&lt;strong>数据链路层与物理层&lt;/strong>合并为&lt;strong>网络接口层&lt;/strong>。具体对应：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="e887b3a" class="language- ">
 &lt;code>OSI七层模型 TCP/IP四层模型
应用层 应用层
表示层 
会话层 
传输层 传输层
网络层 网络层
数据链路层 网络接口层
物理层&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="核心功能对比">核心功能对比 &lt;a href="#%e6%a0%b8%e5%bf%83%e5%8a%9f%e8%83%bd%e5%af%b9%e6%af%94" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>应用层（HTTP）&lt;/strong>：提供具体应用服务（如浏览器请求），定义数据格式规范（HTTP报文）&lt;/li>
&lt;li>&lt;strong>传输层（TCP）&lt;/strong>：端到端可靠传输（三次握手）、流量控制（滑动窗口）、拥塞控制（慢启动）&lt;/li>
&lt;li>&lt;strong>网络层（IP）&lt;/strong>：逻辑寻址（IP地址）、路由选择（OSPF/BGP）、分片重组（MTU限制）&lt;/li>
&lt;li>&lt;strong>链路层（MAC）&lt;/strong>：物理寻址（MAC地址）、帧封装（以太网协议）、差错检测（CRC校验）&lt;/li>
&lt;/ol>
&lt;h3 id="封装过程示例">封装过程示例 &lt;a href="#%e5%b0%81%e8%a3%85%e8%bf%87%e7%a8%8b%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>发送HTTP请求时的协议栈封装：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="8c386d0" class="language-text ">
 &lt;code>应用层：HTTP报文
传输层：&amp;#43;TCP头（源端口|目标端口|序列号）
网络层：&amp;#43;IP头（源IP|目标IP|TTL）
链路层：&amp;#43;以太网头（源MAC|目标MAC）&amp;#43;帧尾校验&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>混淆HTTPS的协议层级（属于应用层，但建立在SSL/TLS加密层之上）&lt;/li>
&lt;li>错误认为ICMP属于传输层（实际是网络层协议）&lt;/li>
&lt;li>忽略MTU分片在网络层与链路层的协作机制&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>OSI七层模型是理论标准，TCP/IP四层模型是实际实现框架。应用层对应HTTP协议处理应用数据格式，传输层通过TCP实现可靠通信，网络层通过IP协议完成路由寻址，链路层基于MAC地址进行物理传输。&lt;/p>
&lt;p>数据封装时，上层数据作为下层载荷逐层添加头部：应用层HTTP报文被TCP头封装为段，追加IP头组成数据包，最终添加MAC头形成数据帧。该层级结构确保各层专注特定功能，例如TCP无需关心具体路由路径，IP层不处理重传机制。&lt;/p>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="协议栈封装代码示例">协议栈封装代码示例 &lt;a href="#%e5%8d%8f%e8%ae%ae%e6%a0%88%e5%b0%81%e8%a3%85%e4%bb%a3%e7%a0%81%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="5aa1e5f" class="language-javascript ">
 &lt;code>// 模拟HTTP请求封装过程
class ProtocolStack {
 constructor() {
 this.layers = {
 application: (data) =&amp;gt; ({ payload: data }), // 应用层生成原始数据
 transport: (segment) =&amp;gt; ({ 
 header: { srcPort: 80, dstPort: 8080, seq: 1 },
 payload: segment 
 }), // 添加TCP头
 network: (packet) =&amp;gt; ({
 header: { srcIP: &amp;#39;192.168.1.1&amp;#39;, dstIP: &amp;#39;10.0.0.1&amp;#39; },
 payload: packet
 }), // 添加IP头
 link: (frame) =&amp;gt; ({
 header: { srcMAC: &amp;#39;00:1A:2B...&amp;#39;, dstMAC: &amp;#39;00:1C:B3...&amp;#39; },
 trailer: &amp;#39;CRC32&amp;#39;,
 payload: frame
 }) // 添加MAC头尾
 };
 }

 send(data) {
 return Object.values(this.layers).reduceRight(
 (acc, layer) =&amp;gt; layer(acc), 
 data
 );
 }
}

// 使用示例
const stack = new ProtocolStack();
console.log(stack.send(&amp;#39;&amp;lt;HTTP Request&amp;gt;&amp;#39;));&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化建议">优化建议 &lt;a href="#%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>头部压缩&lt;/strong>：HTTP/2使用HPACK减少头部体积&lt;/li>
&lt;li>&lt;strong>分片优化&lt;/strong>：PMTUD（路径MTU发现）避免IP层分片&lt;/li>
&lt;li>&lt;strong>QoS控制&lt;/strong>：DiffServ字段实现流量优先级区分&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;h3 id="浏览器输入url到页面加载完成经历了哪些协议">浏览器输入URL到页面加载完成经历了哪些协议？ &lt;a href="#%e6%b5%8f%e8%a7%88%e5%99%a8%e8%be%93%e5%85%a5url%e5%88%b0%e9%a1%b5%e9%9d%a2%e5%8a%a0%e8%bd%bd%e5%ae%8c%e6%88%90%e7%bb%8f%e5%8e%86%e4%ba%86%e5%93%aa%e4%ba%9b%e5%8d%8f%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>DNS(UDP)→HTTP(TCP)→TLS(SSL)→ARP→IP→以太网协议&lt;/p></description></item><item><title>QUIC协议与HTTP/3性能优势</title><link>https://fe-interview.pangcy.cn/docs/network/network-20/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-20/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考察候选人对&lt;strong>网络协议底层原理&lt;/strong>和&lt;strong>传输层优化策略&lt;/strong>的理解深度，聚焦以下核心维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>协议设计思想&lt;/strong>：QUIC协议在应用层实现可靠传输的设计取舍（UDP改造 vs TCP协议栈依赖）&lt;/li>
&lt;li>&lt;strong>传输优化机制&lt;/strong>：零RTT握手与多路复用的技术实现路径及其对性能的影响&lt;/li>
&lt;li>&lt;strong>弱网适应能力&lt;/strong>：连接迁移等特性解决移动端网络切换痛点的具体原理&lt;/li>
&lt;/ol>
&lt;p>技术评估点：&lt;/p>
&lt;ul>
&lt;li>UDP实现可靠传输的核心机制（包重传/有序交付）&lt;/li>
&lt;li>零RTT握手与TLS 1.3的协同工作原理&lt;/li>
&lt;li>基于Connection ID的连接迁移实现&lt;/li>
&lt;li>多路复用与流控机制对队头阻塞的消除&lt;/li>
&lt;li>QUIC拥塞控制算法与TCP的差异性&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>可靠传输三要素：包编号（Packet Number）、确认机制（ACK）、纠错码（FEC）&lt;/li>
&lt;li>零RTT握手：会话票据（Session Ticket）与早期数据（0-RTT Data）&lt;/li>
&lt;li>连接迁移：连接ID（Connection ID）替代四元组绑定&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>：
QUIC通过递增的Packet Number解决TCP重传歧义问题。每个数据包携带独立编号，接收端通过ACK帧反馈接收状态。当检测丢包时，发送方基于时间阈值而非重复ACK触发快速重传。&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="00b2031" class="language-text ">
 &lt;code>[发送端] --Packet#1--&amp;gt; [接收端]
 --Packet#2--&amp;gt; (丢失)
 --Packet#3--&amp;gt; 
 &amp;lt;--ACK#1,3-- 
[重传#2] --Packet#2-Retransmit--&amp;gt;&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>零RTT握手&lt;/strong>：
客户端缓存服务器配置参数（TLS会话票据），后续连接时直接使用预共享密钥加密数据。首包携带应用数据（0-RTT Data）的同时完成加密协商，相较于TCP+TLS 1.3节省1个RTT。&lt;/p>
&lt;p>&lt;strong>连接迁移&lt;/strong>：
传统TCP连接依赖四元组（源IP/端口 + 目标IP/端口），网络切换导致连接中断。QUIC使用客户端生成的64位Connection ID作为唯一标识，网络层变化不影响连接状态。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>误认为UDP传输不可靠：QUIC在应用层实现可靠传输，UDP仅作为传输载体&lt;/li>
&lt;li>混淆0-RTT与1-RTT：零RTT仅适用于非首次连接，且存在重放攻击风险&lt;/li>
&lt;li>忽视多路复用的代价：流级别QoS控制复杂度高于TCP&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>QUIC通过以下机制实现高性能传输：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>可靠传输&lt;/strong>：基于UDP构建类TCP可靠性，通过唯一递增包编号消除重传歧义，结合前向纠错码降低重传率&lt;/li>
&lt;li>&lt;strong>零RTT握手&lt;/strong>：复用TLS会话票据实现&amp;quot;半持久化&amp;quot;安全连接，首包即携带有效载荷，降低延迟敏感型业务的首屏时间&lt;/li>
&lt;li>&lt;strong>多路复用&lt;/strong>：独立流（Stream）设计实现真并行传输，单个包丢失仅影响对应流，彻底解决TCP队头阻塞&lt;/li>
&lt;li>&lt;strong>连接迁移&lt;/strong>：通过连接ID解耦网络层变化，保持移动端IP切换时的会话连续性&lt;/li>
&lt;/ol>
&lt;p>弱网环境下核心增益：&lt;/p>
&lt;ul>
&lt;li>多路复用使高频小包请求不受单个丢包影响（如弱网下的API并发调用）&lt;/li>
&lt;li>自适应拥塞控制（如BBR算法）动态调整发包策略，提升带宽利用率&lt;/li>
&lt;li>连接迁移避免WiFi/4G切换导致的连接重建开销&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="协议配置示例caddy-server">协议配置示例（Caddy Server） &lt;a href="#%e5%8d%8f%e8%ae%ae%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8bcaddy-server" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="da13ad6" class="language-nginx ">
 &lt;code>{
 &amp;#34;apps&amp;#34;: {
 &amp;#34;http&amp;#34;: {
 &amp;#34;servers&amp;#34;: {
 &amp;#34;example&amp;#34;: {
 &amp;#34;listen&amp;#34;: [&amp;#34;:443&amp;#34;],
 &amp;#34;experimental_http3&amp;#34;: true,
 &amp;#34;tls&amp;#34;: {
 &amp;#34;certificate&amp;#34;: &amp;#34;auto&amp;#34;
 }
 }
 }
 }
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>关键优化点：&lt;/p></description></item><item><title>XSS攻击防御与CSP策略</title><link>https://fe-interview.pangcy.cn/docs/network/network-21/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-21/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考核候选人的&lt;strong>Web安全防御体系设计能力&lt;/strong>，涉及三个核心维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>XSS攻击类型辨析&lt;/strong>：区分反射型、存储型、DOM型XSS的攻击原理与威胁场景&lt;/li>
&lt;li>&lt;strong>CSP策略机制&lt;/strong>：理解内容安全策略的白名单控制原理及部署方式&lt;/li>
&lt;li>&lt;strong>纵深防御思维&lt;/strong>：掌握输入过滤与输出编码的协同防御模式及其互补关系&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点包括：&lt;/p>
&lt;ul>
&lt;li>XSS三类型攻击载荷的存储位置与触发方式差异&lt;/li>
&lt;li>CSP指令集对脚本加载源的限制机制（script-src/unsafe-inline控制）&lt;/li>
&lt;li>不同上下文环境（HTML/JS/CSS）的输出编码策略选择&lt;/li>
&lt;li>CSP nonce/hash在安全执行内联脚本中的应用&lt;/li>
&lt;li>防御方案如何兼顾功能可用性与安全性&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>CSP白名单 &amp;gt; XSS类型差异 &amp;gt; 输出编码策略 &amp;gt; 输入验证&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>XSS类型本质差异&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>反射型XSS：恶意脚本通过URL参数注入，服务端未过滤直接返回页面&lt;/li>
&lt;li>存储型XSS：攻击载荷持久化存储于服务器（如评论系统），页面渲染时触发&lt;/li>
&lt;li>DOM型XSS：完全客户端执行，通过修改DOM树触发（如location.hash）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>CSP白名单机制&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="199edd7" class="language-nginx ">
 &lt;code># Nginx配置示例
Content-Security-Policy: 
 default-src &amp;#39;self&amp;#39;;
 script-src &amp;#39;self&amp;#39; https://trusted.cdn.com;
 style-src &amp;#39;none&amp;#39;;
 object-src &amp;#39;none&amp;#39;;
 report-uri /csp-report;&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;ul>
&lt;li>&lt;code>script-src&lt;/code>限制脚本加载源，禁用&lt;code>unsafe-inline&lt;/code>可阻止内联脚本&lt;/li>
&lt;li>通过&lt;code>nonce-{随机值}&lt;/code>或&lt;code>sha256-{哈希值}&lt;/code>允许特定内联脚本&lt;/li>
&lt;li>违规行为通过report-uri上报监控系统&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>联合防御方案&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>输入过滤：服务端对用户输入进行合法性校验（如正则过滤&amp;lt;&amp;gt;&amp;rsquo;&amp;ldquo;等危险字符）&lt;/li>
&lt;li>输出编码：根据输出位置采用不同编码策略（HTML实体编码、JavaScript Unicode转义）&lt;/li>
&lt;li>CSP兜底：防止前两层防御失效时的脚本执行&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>仅依赖输入过滤而忽略输出编码（无法防御编码绕过场景）&lt;/li>
&lt;li>错误配置&lt;code>default-src 'self'&lt;/code>却未限制object-src导致插件漏洞&lt;/li>
&lt;li>未处理JSONP端点导致CSP白名单被绕过&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>三种XSS的核心差异在于攻击载荷的存储位置与触发方式：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>反射型&lt;/strong>通过URL参数注入，非持久化，需要诱导点击&lt;/li>
&lt;li>&lt;strong>存储型&lt;/strong>将恶意代码保存在服务端，持续影响所有访问者&lt;/li>
&lt;li>&lt;strong>DOM型&lt;/strong>完全在客户端解析执行，不经过服务端&lt;/li>
&lt;/ul>
&lt;p>CSP通过白名单机制控制资源加载：&lt;/p>
&lt;ol>
&lt;li>设置HTTP响应头的&lt;code>Content-Security-Policy&lt;/code>字段&lt;/li>
&lt;li>使用&lt;code>script-src&lt;/code>指令限制脚本来源，禁止内联脚本（除非使用nonce或hash）&lt;/li>
&lt;li>通过&lt;code>connect-src&lt;/code>限制AJAX请求源，防止数据泄露&lt;/li>
&lt;/ol>
&lt;p>联合防御方案需多层级配合：&lt;/p></description></item><item><title>CSRF攻击Token验证机制</title><link>https://fe-interview.pangcy.cn/docs/network/network-22/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-22/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题主要考核候选人对Web安全防御机制的系统性理解，重点评估三个核心维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>CSRF攻击原理认知&lt;/strong>：理解攻击如何利用Cookie自动携带机制&lt;/li>
&lt;li>&lt;strong>防御方案设计能力&lt;/strong>：对比双重Cookie验证与Token校验的实现差异&lt;/li>
&lt;li>&lt;strong>现代安全机制掌握&lt;/strong>：剖析SameSite属性工作原理及浏览器兼容性处理&lt;/li>
&lt;/ol>
&lt;p>具体评估点：&lt;/p>
&lt;ul>
&lt;li>CSRF的会话挟持实现路径&lt;/li>
&lt;li>双重Cookie验证的XSS防御脆弱性&lt;/li>
&lt;li>Token存储方案的安全性考量&lt;/li>
&lt;li>SameSite属性与CORS策略的协同&lt;/li>
&lt;li>防御机制组合方案设计&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>SameSite Cookie &amp;gt; CSRF Token &amp;gt; 双重Cookie验证 &amp;gt; 请求来源校验&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>CSRF攻击通过诱导用户访问恶意页面，利用浏览器自动携带身份Cookie的特性伪造请求。防御体系需打破&amp;quot;请求自动携带凭证&amp;quot;和&amp;quot;请求来源不可控&amp;quot;两个关键点。&lt;/p>
&lt;p>&lt;strong>双重Cookie验证&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>服务端生成随机Token写入Cookie&lt;/li>
&lt;li>前端读取Cookie值作为参数或自定义Header发送&lt;/li>
&lt;li>服务端校验请求携带值是否与Cookie匹配&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>CSRF Token校验&lt;/strong>：&lt;/p>
&lt;pre class="mermaid">graph TD
A[用户登录] --&amp;gt; B[生成加密Token]
B --&amp;gt; C[Token存入Session]
C --&amp;gt; D[嵌入表单隐藏域]
D --&amp;gt; E[请求携带Token]
E --&amp;gt; F[服务端校验]
&lt;/pre>
&lt;p>&lt;strong>SameSite Cookie&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>Strict：完全禁止跨站携带&lt;/li>
&lt;li>Lax：允许导航跳转携带（GET请求）&lt;/li>
&lt;li>None：关闭限制（需配合Secure）&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>混淆XSS与CSRF防御方案&lt;/li>
&lt;li>误认为SameSite可替代其他CSRF防护&lt;/li>
&lt;li>在Token存储时忽略加密签名&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>CSRF攻击利用浏览器自动携带Cookie的特性，通过伪造用户身份执行敏感操作。双重Cookie验证通过在请求参数或Header中携带Cookie值进行二次校验，但存在XSS漏洞暴露风险。服务端Token校验通过加密令牌实现请求来源认证，配合Session存储更安全。SameSite Cookie通过限制跨站请求的Cookie携带行为，与Token方案形成纵深防御。&lt;/p>
&lt;p>防御方案需注意：&lt;/p>
&lt;ol>
&lt;li>Token需加密存储并设置有效期&lt;/li>
&lt;li>敏感操作使用POST等非幂等方法&lt;/li>
&lt;li>SameSite设置为Lax平衡安全与可用性&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="双重cookie实现">双重Cookie实现 &lt;a href="#%e5%8f%8c%e9%87%8dcookie%e5%ae%9e%e7%8e%b0" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="fbfefc7" class="language-javascript ">
 &lt;code>// 服务端设置Cookie时生成随机Token
res.setHeader(&amp;#39;Set-Cookie&amp;#39;, [
 `csrf_token=${generateToken()}; HttpOnly; SameSite=Lax`
])

// 前端Ajax请求示例
fetch(&amp;#39;/transfer&amp;#39;, {
 method: &amp;#39;POST&amp;#39;,
 headers: {
 &amp;#39;X-CSRF-TOKEN&amp;#39;: document.cookie.match(/csrf_token=([^;]&amp;#43;)/)[1] 
 }
})&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="token校验实现">Token校验实现 &lt;a href="#token%e6%a0%a1%e9%aa%8c%e5%ae%9e%e7%8e%b0" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="2f1cbf2" class="language-javascript ">
 &lt;code>// 生成加密Token（使用HMAC算法）
const crypto = require(&amp;#39;crypto&amp;#39;)
function generateToken(session) {
 const hmac = crypto.createHmac(&amp;#39;sha256&amp;#39;, process.env.SECRET)
 return hmac.update(session).digest(&amp;#39;hex&amp;#39;)
}

// 中间件校验
app.post(&amp;#39;/api&amp;#39;, (req, res) =&amp;gt; {
 const clientToken = req.headers[&amp;#39;x-csrf-token&amp;#39;]
 const serverToken = generateToken(req.session.id)
 if(!constantTimeCompare(clientToken, serverToken)) {
 return res.sendStatus(403)
 }
})&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化建议">优化建议 &lt;a href="#%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>关键操作增加短信二次验证&lt;/li>
&lt;li>重要接口限制同源访问（CORS白名单）&lt;/li>
&lt;li>监控异常请求频率&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何防御Token在前端的存储风险？&lt;/strong>&lt;/p></description></item><item><title>HTTPS中间人攻击防护</title><link>https://fe-interview.pangcy.cn/docs/network/network-23/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-23/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：HTTPS安全机制理解、证书体系运作原理、浏览器安全策略实施能力&lt;/p>
&lt;ol>
&lt;li>&lt;strong>中间人攻击原理&lt;/strong>：理解经典MITM攻击手段（如SSL剥离/伪造证书）&lt;/li>
&lt;li>&lt;strong>证书链验证机制&lt;/strong>：掌握证书层级校验、信任锚点验证、域名匹配规则&lt;/li>
&lt;li>&lt;strong>证书吊销校验&lt;/strong>：区分CRL/OCSP校验流程及时效性差异&lt;/li>
&lt;li>&lt;strong>HSTS强制策略&lt;/strong>：理解协议降级防护机制与预加载机制&lt;/li>
&lt;/ol>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>证书链验证 &amp;gt; OCSP Stapling &amp;gt; HSTS &amp;gt; CRL&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>：&lt;br>
攻击者通过ARP欺骗/DNS劫持将流量导至代理服务器，使用自签名证书解密流量（需用户手动信任假证书），或配合SSL剥离将HTTPS降级为HTTP。&lt;/p>
&lt;p>&lt;strong>证书链验证流程&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>浏览器获取服务器证书，验证证书有效期/域名匹配&lt;/li>
&lt;li>向上递归验证中间CA证书，直到受信任的根证书库&lt;/li>
&lt;li>验证证书链完整性（证书中指定的issuer与上级证书subject匹配）&lt;/li>
&lt;li>检查证书吊销状态：
&lt;ul>
&lt;li>&lt;strong>CRL&lt;/strong>：下载证书吊销列表（周期性更新，存在时间差）&lt;/li>
&lt;li>&lt;strong>OCSP&lt;/strong>：实时查询证书状态（通过请求OCSP响应器，可能暴露用户隐私）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>HSTS机制&lt;/strong>：&lt;br>
服务器通过&lt;code>Strict-Transport-Security&lt;/code>响应头声明HTTPS强制策略（包含max-age、includeSubDomains等参数）。浏览器在有效期内自动将HTTP请求转换为HTTPS，并拒绝不安全的证书警告。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>认为所有中间人攻击都可被证书校验拦截（忽略用户主动信任恶意证书的情况）&lt;/li>
&lt;li>混淆CRL文件更新周期与OCSP实时查询的差异&lt;/li>
&lt;li>误以为HSTS可完全防御首次访问的中间人攻击（依赖首次安全访问）&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>&lt;strong>中间人攻击劫持流程&lt;/strong>：&lt;br>
攻击者通过伪造证书或协议降级，在客户端与服务器之间建立两个独立SSL连接，转发解密后的数据。需要用户忽略证书错误或配合其他攻击手段（如WiFi热点欺诈）。&lt;/p>
&lt;p>&lt;strong>证书链校验流程&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>浏览器验证服务器证书的域名、有效期、签名&lt;/li>
&lt;li>递归验证中间CA证书，直至信任的根证书&lt;/li>
&lt;li>检查吊销状态：
&lt;ul>
&lt;li>优先使用OCSP实时查询（返回&amp;quot;good&amp;quot;/&amp;ldquo;revoked&amp;quot;状态）&lt;/li>
&lt;li>或下载CRL文件核对序列号&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>HSTS生效流程&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>服务器返回&lt;code>Strict-Transport-Security&lt;/code>头部（例：&lt;code>max-age=31536000; includeSubDomains&lt;/code>）&lt;/li>
&lt;li>浏览器记录该域名在未来31536000秒内必须使用HTTPS&lt;/li>
&lt;li>后续所有HTTP请求自动转换为HTTPS（地址栏输入亦生效）&lt;/li>
&lt;li>内置HSTS预加载列表可防御首次访问攻击&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="配置示例nginx">配置示例（Nginx） &lt;a href="#%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8bnginx" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="204b20d" class="language-nginx ">
 &lt;code># 强制启用HSTS
add_header Strict-Transport-Security &amp;#34;max-age=31536000; includeSubDomains&amp;#34; always;

# 启用OCSP Stapling优化
ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /path/full_chain.pem;
resolver 8.8.8.8 valid=300s;&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>注释说明&lt;/strong>：&lt;/p></description></item><item><title>点击劫持与X-Frame防护</title><link>https://fe-interview.pangcy.cn/docs/network/network-24/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-24/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题重点考察前端安全防护能力与HTTP安全头配置原理，主要评估：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>安全威胁识别&lt;/strong>：是否理解点击劫持的攻击手法及危害&lt;/li>
&lt;li>&lt;strong>防护机制掌握&lt;/strong>：对X-Frame-Options响应头不同策略的应用场景理解&lt;/li>
&lt;li>&lt;strong>安全策略进阶&lt;/strong>：CSP规范中frame-ancestors指令的现代化防护方案&lt;/li>
&lt;li>&lt;strong>策略优先级判断&lt;/strong>：多安全头共存时的浏览器处理逻辑&lt;/li>
&lt;/ol>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>点击劫持攻击原理&lt;/li>
&lt;li>X-Frame-Options响应头&lt;/li>
&lt;li>CSP的frame-ancestors指令&lt;/li>
&lt;li>安全头优先级逻辑&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>通过透明iframe覆盖目标页面，诱导用户点击看似无害的UI元素（如虚假按钮），实际触发隐藏iframe内的敏感操作。攻击者常使用CSS控制iframe的透明度和定位：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="6179931" class="language-css ">
 &lt;code>iframe {
 opacity: 0.5;
 position: absolute;
 z-index: 999;
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>X-Frame-Options&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>&lt;code>DENY&lt;/code>：完全禁止iframe加载&lt;/li>
&lt;li>&lt;code>SAMEORIGIN&lt;/code>：仅允许同源iframe嵌套&lt;/li>
&lt;li>（历史方案&lt;code>ALLOW-FROM&lt;/code>已被CSP取代）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>CSP frame-ancestors&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>语法：&lt;code>Content-Security-Policy: frame-ancestors 'self' https://trusted.com;&lt;/code>&lt;/li>
&lt;li>支持多域名白名单配置，比X-Frame-Options更灵活&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>优先级规则&lt;/strong>：当同时设置X-Frame-Options和CSP frame-ancestors时，&lt;strong>CSP指令优先生效&lt;/strong>，因现代浏览器逐步采用CSP作为更强大的安全机制。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>误认为两个安全头会叠加生效&lt;/li>
&lt;li>混淆&lt;code>SAMEORIGIN&lt;/code>与&lt;code>frame-ancestors 'self'&lt;/code>的作用域&lt;/li>
&lt;li>未考虑IE11等老旧浏览器的兼容性问题&lt;/li>
&lt;/ol>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>点击劫持通过透明iframe覆盖诱导用户点击隐藏页面元素，实施未授权操作。防护方案中：&lt;/p>
&lt;ol>
&lt;li>&lt;code>X-Frame-Options: DENY&lt;/code>完全禁止嵌套&lt;/li>
&lt;li>&lt;code>X-Frame-Options: SAMEORIGIN&lt;/code>仅允许同源嵌套&lt;/li>
&lt;li>&lt;code>Content-Security-Policy: frame-ancestors&lt;/code>可指定允许域名白名单&lt;/li>
&lt;/ol>
&lt;p>当同时设置时，CSP的frame-ancestors优先级高于X-Frame-Options。现代浏览器优先采用CSP指令，旧版浏览器可能仍参照X-Frame-Options。&lt;/p>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="服务端配置示例nginx">服务端配置示例（Nginx） &lt;a href="#%e6%9c%8d%e5%8a%a1%e7%ab%af%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8bnginx" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="25093b0" class="language-nginx ">
 &lt;code>add_header X-Frame-Options &amp;#34;SAMEORIGIN&amp;#34;;
add_header Content-Security-Policy &amp;#34;frame-ancestors &amp;#39;self&amp;#39;;&amp;#34;;&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="最佳实践">最佳实践 &lt;a href="#%e6%9c%80%e4%bd%b3%e5%ae%9e%e8%b7%b5" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>现代项目优先使用CSP，兼容旧系统时保留X-Frame-Options&lt;/li>
&lt;li>敏感操作页面建议直接使用DENY策略&lt;/li>
&lt;li>监控安全头配置有效性（可使用SecurityHeaders.com扫描）&lt;/li>
&lt;/ol>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何检测网站是否存在点击劫持漏洞？&lt;/strong>
使用浏览器开发者工具检查响应头配置，或通过在线安全检测工具扫描&lt;/p></description></item><item><title>资源加载性能优化</title><link>https://fe-interview.pangcy.cn/docs/network/network-25/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-25/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考核候选人对以下维度的理解：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>浏览器资源加载机制&lt;/strong>：区分preload/prefetch/dns-prefetch的工作原理与应用场景&lt;/li>
&lt;li>&lt;strong>HTTP协议演进认知&lt;/strong>：解析HTTP/2 Server Push的RTT优化原理&lt;/li>
&lt;li>&lt;strong>性能优化实践能力&lt;/strong>：使用现代API实现懒加载的技术选型与实现细节&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>资源提示的优先级控制（preload立即加载 vs prefetch空闲加载）&lt;/li>
&lt;li>DNS预解析与TCP连接建立的时序关系&lt;/li>
&lt;li>Server Push的主动推送机制与传统请求响应模型的差异&lt;/li>
&lt;li>IntersectionObserver替代传统滚动监听方案的优势&lt;/li>
&lt;li>懒加载实现中的临界条件处理（占位符、加载失败等情况）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>HTTP/2 Server Push &amp;gt; 资源提示优先级 &amp;gt; IntersectionObserver API&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>：&lt;/p>
&lt;ul>
&lt;li>&lt;code>preload&lt;/code>：强制浏览器立即请求指定资源（优先级：High），适用于当前导航立刻需要的资源（如首屏字体/关键CSS）&lt;/li>
&lt;li>&lt;code>prefetch&lt;/code>：低优先级预加载未来页面可能使用的资源（如下一页的图片），浏览器空闲时执行&lt;/li>
&lt;li>&lt;code>dns-prefetch&lt;/code>：提前解析跨域DNS，缩短后续请求的DNS查询时间（约20-120ms）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>HTTP/2 Server Push&lt;/strong>：
通过服务端主动推送关联资源，减少客户端解析HTML后再次请求资源的RTT（Round Trip Time）。例如请求&lt;code>index.html&lt;/code>时主动推送&lt;code>style.css&lt;/code>，消除CSS文件请求的1个RTT（传统HTTP/1.1需要：HTML请求→HTML响应→CSS请求→CSS响应）。&lt;/p>
&lt;p>&lt;strong>IntersectionObserver&lt;/strong>：
通过异步观察目标元素与视窗交叉状态，避免传统滚动监听的高频计算。当图片进入视口时替换&lt;code>data-src&lt;/code>为真实src，实现按需加载。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误用preload加载非关键资源，导致关键资源被延迟&lt;/li>
&lt;li>认为dns-prefetch能加速同域资源（实际同域DNS已缓存）&lt;/li>
&lt;li>未配置Server Push缓存策略导致重复推送&lt;/li>
&lt;li>懒加载未设置阈值（threshold）导致图片加载过早&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>&lt;strong>资源提示场景&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>&lt;code>preload&lt;/code>：首屏关键字体、折叠上方CSS/JS&lt;/li>
&lt;li>&lt;code>prefetch&lt;/code>：用户鼠标悬停时预取下一页商品数据&lt;/li>
&lt;li>&lt;code>dns-prefetch&lt;/code>：电商平台预解析第三方支付域名DNS&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>HTTP/2 Server Push&lt;/strong>：
服务端在响应主资源时主动推送子资源，消除客户端&amp;quot;发现-请求&amp;quot;的等待时间。例如推送首屏CSS文件可减少至少1次RTT，但需配合缓存策略避免过度推送。&lt;/p>
&lt;p>&lt;strong>IntersectionObserver懒加载&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="83c618e" class="language-javascript ">
 &lt;code>// 观察所有带data-src的图片
const observer = new IntersectionObserver((entries) =&amp;gt; {
 entries.forEach(entry =&amp;gt; {
 if (entry.isIntersecting) { 
 const img = entry.target
 img.src = img.dataset.src
 observer.unobserve(img) // 加载后解除观察
 }
 })
}, {
 rootMargin: &amp;#39;200px&amp;#39;, // 提前200px触发加载
 threshold: 0.01
})

document.querySelectorAll(&amp;#39;img[data-src]&amp;#39;).forEach(img =&amp;gt; observer.observe(img))&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="编码优化点">编码优化点 &lt;a href="#%e7%bc%96%e7%a0%81%e4%bc%98%e5%8c%96%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>加载失败处理&lt;/strong>：添加&lt;code>onerror&lt;/code>事件切换备用源&lt;/li>
&lt;li>&lt;strong>占位策略&lt;/strong>：使用低质量图片占位（LQIP）提升体验&lt;/li>
&lt;li>&lt;strong>兼容方案&lt;/strong>：添加IntersectionObserver polyfill或降级为滚动监听&lt;/li>
&lt;/ol>
&lt;h3 id="扩展性建议">扩展性建议 &lt;a href="#%e6%89%a9%e5%b1%95%e6%80%a7%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>&lt;strong>大流量场景&lt;/strong>：结合CDN预解析（如&lt;code>&amp;lt;link rel=&amp;quot;preconnect&amp;quot;&amp;gt;&lt;/code>）&lt;/li>
&lt;li>&lt;strong>低端设备&lt;/strong>：降低观察阈值，采用渐进加载策略&lt;/li>
&lt;li>&lt;strong>SEO优化&lt;/strong>：添加&lt;code>&amp;lt;noscript&amp;gt;&lt;/code>标签保证爬虫可抓取&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何验证Server Push实际效果？&lt;/strong>&lt;/p></description></item><item><title>同源策略与跨域解决方案</title><link>https://fe-interview.pangcy.cn/docs/network/network-26/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-26/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>浏览器安全机制理解&lt;/strong>：同源策略的设计目标与具体限制维度&lt;/li>
&lt;li>&lt;strong>跨域方案技术选型&lt;/strong>：对比不同解决方案的底层原理与适用场景&lt;/li>
&lt;li>&lt;strong>安全防护意识&lt;/strong>：分析各方案的安全边界与风险点&lt;/li>
&lt;li>&lt;strong>工程实践能力&lt;/strong>：根据业务场景选择最佳跨域方案&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>同源策略的三要素判定（协议/域名/端口）&lt;/li>
&lt;li>CORS预检请求触发条件与流程控制&lt;/li>
&lt;li>JSONP的脚本注入风险与防御措施&lt;/li>
&lt;li>反向代理方案的服务器架构影响&lt;/li>
&lt;li>凭证模式的CORS配置注意事项&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>CORS &amp;gt; 反向代理 &amp;gt; JSONP &amp;gt; 同源策略&lt;/p>
&lt;h4 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ol>
&lt;li>
&lt;p>&lt;strong>同源策略&lt;/strong>：浏览器安全基座，限制跨源资源交互。影响XMLHttpRequest、Fetch API、Web Fonts、Web Workers等&lt;/p>
&lt;ul>
&lt;li>跨域写（Cross-origin writes）：默认允许（如表单提交）&lt;/li>
&lt;li>跨域资源嵌入（Cross-origin embedding）：需MIME类型校验&lt;/li>
&lt;li>跨域读（Cross-origin reads）：默认禁止&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>CORS&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>简单请求：满足特定条件（GET/POST/HEAD，Content-Type为text/plain等）&lt;/li>
&lt;li>预检请求：非简单请求先发OPTIONS验证（复杂请求特征检测）&lt;/li>
&lt;/ul>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="a2a4740" class="language-http ">
 &lt;code>Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: X-Custom-Header&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>JSONP&lt;/strong>：利用&lt;code>&amp;lt;script&amp;gt;&lt;/code>标签不受同源限制的特性&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="8909faf" class="language-javascript ">
 &lt;code>function handleResponse(data) {
 console.log(&amp;#39;Received:&amp;#39;, data);
}
const script = document.createElement(&amp;#39;script&amp;#39;);
script.src = &amp;#39;http://external.com/data?callback=handleResponse&amp;#39;;
document.body.appendChild(script);&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>反向代理&lt;/strong>：服务端中转实现同源访问&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="f0a2a60" class="language-nginx ">
 &lt;code>location /api/ {
 proxy_pass http://backend-server:8080/;
 proxy_set_header Host $host;
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;/li>
&lt;/ol>
&lt;h4 id="安全性差异对比">安全性差异对比 &lt;a href="#%e5%ae%89%e5%85%a8%e6%80%a7%e5%b7%ae%e5%bc%82%e5%af%b9%e6%af%94" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>方案&lt;/th>
 &lt;th>安全风险&lt;/th>
 &lt;th>防御措施&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>CORS&lt;/td>
 &lt;td>配置错误导致CSRF&lt;/td>
 &lt;td>严格设置allow-origin&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>JSONP&lt;/td>
 &lt;td>XSS攻击、回调劫持&lt;/td>
 &lt;td>输入过滤+随机回调名&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>反向代理&lt;/td>
 &lt;td>增加攻击面&lt;/td>
 &lt;td>代理层请求过滤&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>浏览器同源策略通过协议/域名/端口三要素校验阻止跨域资源访问，主要限制AJAX请求、DOM访问和存储隔离。CORS通过服务端响应头实现跨域授权，需区分简单请求（直接发送）与预检请求（OPTIONS预检）。JSONP利用脚本标签跨域特性但存在XSS风险，反向代理通过服务端中转隐藏跨域。withCredentials凭证模式应在前端需携带Cookies/HTTP认证且服务端配置Access-Control-Allow-Credentials: true时使用，同时需避免使用通配符(*)配置origin。&lt;/p></description></item><item><title>Cookie安全属性配置策略</title><link>https://fe-interview.pangcy.cn/docs/network/network-27/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-27/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题考察候选人三个核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>安全防护机制理解&lt;/strong>：Cookie安全属性的防御作用及组合使用策略&lt;/li>
&lt;li>&lt;strong>浏览器安全策略演进&lt;/strong>：SameSite默认值变化的背景及技术决策逻辑&lt;/li>
&lt;li>&lt;strong>纵深防御体系建设&lt;/strong>：多维度安全属性的协同防御效果&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>SameSite三种模式对CSRF攻击的阻断原理&lt;/li>
&lt;li>HttpOnly与Secure属性的防御边界&lt;/li>
&lt;li>浏览器厂商安全策略调整的驱动因素&lt;/li>
&lt;li>跨站请求伪造（CSRF）与跨站脚本（XSS）的防御差异&lt;/li>
&lt;li>Cookie作用域控制与传输层安全的联动机制&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>SameSite策略 &amp;gt; CSRF攻击链 &amp;gt; HttpOnly/Secure防御层次&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>SameSite=Lax&lt;/strong>（默认值）：&lt;/p>
&lt;ul>
&lt;li>允许跨站GET请求携带Cookie（如图片加载、导航跳转）&lt;/li>
&lt;li>阻止跨站POST请求携带Cookie（防御表单类CSRF）&lt;/li>
&lt;li>例外：通过top-level navigation的GET请求携带Cookie（保留用户登录态）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>SameSite=Strict&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>完全禁止跨站请求携带Cookie&lt;/li>
&lt;li>典型场景：银行交易页面需要最高级别防护&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>防御纵深构建&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>HttpOnly：防止XSS攻击窃取Cookie（&lt;code>document.cookie&lt;/code>不可读）&lt;/li>
&lt;li>Secure：HTTPS加密传输防中间人窃听（非安全连接不发送）&lt;/li>
&lt;li>SameSite：最后一层防御CSRF的核心机制&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误认为Lax模式能完全防御CSRF（需配合CSRF Token）&lt;/li>
&lt;li>忽略Secure属性在HTTP环境中的失效风险&lt;/li>
&lt;li>混淆XSS与CSRF的防御边界（HttpOnly专注XSS，SameSite专注CSRF）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>SameSite=Lax通过限制跨站POST请求携带Cookie，有效防御大多数CSRF攻击场景，同时保持GET请求的可用性。配合HttpOnly防止XSS窃取Cookie、Secure确保HTTPS传输，形成三道防御层。浏览器默认采用Lax是平衡安全性与兼容性的选择——严格模式会破坏第三方登录等合法场景，而Lax在阻止危险请求（如POST）的同时，允许安全导航（如链接跳转），既提升安全基线又保持业务正常流转。&lt;/p>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="编码示例">编码示例 &lt;a href="#%e7%bc%96%e7%a0%81%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="88b4dff" class="language-javascript ">
 &lt;code>// Express设置安全Cookie示例
res.cookie(&amp;#39;sessionID&amp;#39;, &amp;#39;encryptedValue&amp;#39;, {
 httpOnly: true, // 禁止脚本读取
 secure: true, // 仅HTTPS传输
 sameSite: &amp;#39;Lax&amp;#39;, // 基础CSRF防护
 maxAge: 24*60*60*1000
});&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>复杂度优化&lt;/strong>：&lt;/p></description></item><item><title>JWT认证机制实现原理</title><link>https://fe-interview.pangcy.cn/docs/network/network-28/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-28/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>安全机制理解&lt;/strong>：JWT的安全实现原理及防篡改机制&lt;/li>
&lt;li>&lt;strong>密码学应用能力&lt;/strong>：对称加密（HMAC）与非对称加密（RSA）在签名中的差异&lt;/li>
&lt;li>&lt;strong>系统设计思维&lt;/strong>：短期Token与Refresh Token组合方案的设计权衡&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>JWT三段式结构编码规范&lt;/li>
&lt;li>数字签名对报文完整性的保障机制&lt;/li>
&lt;li>不同签名算法的密钥管理策略&lt;/li>
&lt;li>无状态认证场景下的会话安全控制&lt;/li>
&lt;li>Token时效性与用户体验的平衡&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>JWT结构 &amp;gt; 数字签名算法 &amp;gt; Token时效策略&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>JWT采用Base64URL编码的JSON结构，包含：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>Header&lt;/strong>：声明算法类型（alg）和令牌类型（typ）&lt;/li>
&lt;/ol>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="4ea4fda" class="language-javascript ">
 &lt;code>// Header示例
{ &amp;#34;alg&amp;#34;: &amp;#34;HS256&amp;#34;, &amp;#34;typ&amp;#34;: &amp;#34;JWT&amp;#34; }&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;ol start="2">
&lt;li>&lt;strong>Payload&lt;/strong>：携带业务数据（claims）如用户ID、过期时间（exp）&lt;/li>
&lt;li>&lt;strong>Signature&lt;/strong>：对前两部分的签名，通过HMAC或RSA算法确保数据完整性&lt;/li>
&lt;/ol>
&lt;p>签名生成逻辑：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="dae4b75" class="language- ">
 &lt;code>HMAC_SHA256(base64(header) &amp;#43; &amp;#34;.&amp;#34; &amp;#43; base64(payload), secret)&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>验证时服务端重新计算签名，与令牌中的签名比对。任何对Header/Payload的修改都会导致签名不匹配。&lt;/p>
&lt;p>&lt;strong>密钥差异&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>HMAC：对称加密，服务端存储密钥，计算效率高&lt;/li>
&lt;li>RSA：非对称加密，私钥签名公钥验签，适合微服务架构&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误将敏感数据存放在未加密的Payload中&lt;/li>
&lt;li>混淆JWT加密（JWE）与签名（JWS）的区别&lt;/li>
&lt;li>认为Refresh Token不需要服务端存储（实际需要持久化存储）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>JWT通过三段式结构实现无状态认证。Header声明算法，Payload携带业务数据，Signature通过HMAC或RSA确保数据完整性。以HMAC为例，服务端用密钥生成签名，任何对令牌的篡改都会导致签名验证失败。RSA方案通过私钥签名公钥验证，更适合多系统协作场景。&lt;/p>
&lt;p>短期Access Token（如15分钟）降低泄露风险，配合长期Refresh Token（如7天）实现平滑续期。Refresh Token需持久化存储并严格保护，当Access Token过期时，用户凭Refresh Token获取新Access Token。这种设计在保持无状态优势的同时，兼顾安全性与用户体验。&lt;/p>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="编码示例">编码示例 &lt;a href="#%e7%bc%96%e7%a0%81%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="6d3f7cb" class="language-javascript ">
 &lt;code>// 生成JWT
const crypto = require(&amp;#39;crypto&amp;#39;);

function sign(payload, secret) {
 const header = Buffer.from(JSON.stringify({ alg: &amp;#39;HS256&amp;#39;, typ: &amp;#39;JWT&amp;#39; })).toString(&amp;#39;base64url&amp;#39;);
 const payloadEncoded = Buffer.from(JSON.stringify(payload)).toString(&amp;#39;base64url&amp;#39;);
 const signature = crypto.createHmac(&amp;#39;sha256&amp;#39;, secret)
 .update(`${header}.${payloadEncoded}`)
 .digest(&amp;#39;base64url&amp;#39;);
 return `${header}.${payloadEncoded}.${signature}`;
}

// 验证示例
function verify(token, secret) {
 const [headerB64, payloadB64, signature] = token.split(&amp;#39;.&amp;#39;);
 const expectedSig = crypto.createHmac(&amp;#39;sha256&amp;#39;, secret)
 .update(`${headerB64}.${payloadB64}`)
 .digest(&amp;#39;base64url&amp;#39;);
 return crypto.timingSafeEqual(
 Buffer.from(signature),
 Buffer.from(expectedSig)
 );
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="可扩展性建议">可扩展性建议 &lt;a href="#%e5%8f%af%e6%89%a9%e5%b1%95%e6%80%a7%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>密钥轮转：HMAC场景使用密钥版本号，RSA场景定期更换密钥对&lt;/li>
&lt;li>分布式验证：通过JWKS端点发布公钥，适用于微服务架构&lt;/li>
&lt;li>性能优化：签名验证耗时较高时，采用本地缓存验证结果&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何防范JWT重放攻击？&lt;/strong>&lt;/p></description></item><item><title>OAuth2.0授权码模式流程</title><link>https://fe-interview.pangcy.cn/docs/network/network-29/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-29/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考察面试者对现代认证协议的核心理解与安全机制设计能力：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>协议流程掌握度&lt;/strong>：能否清晰描述授权码模式的交互流程与组件职责&lt;/li>
&lt;li>&lt;strong>安全防护认知&lt;/strong>：是否理解PKCE扩展对抗授权码拦截攻击的防御原理&lt;/li>
&lt;li>&lt;strong>模式对比分析&lt;/strong>：是否能准确指出隐式模式的架构缺陷及安全风险&lt;/li>
&lt;li>&lt;strong>最佳实践意识&lt;/strong>：是否关注OAuth2.1规范演进及行业安全建议&lt;/li>
&lt;/ol>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>OAuth2.0协议规范 &amp;gt; 授权码模式流程 &amp;gt; PKCE扩展机制 &amp;gt; 隐式模式漏洞&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>：&lt;/p>
&lt;ol>
&lt;li>客户端构造授权请求，携带&lt;code>client_id&lt;/code>、&lt;code>redirect_uri&lt;/code>、&lt;code>scope&lt;/code>等参数，引导用户代理跳转至授权服务器&lt;/li>
&lt;li>授权服务器验证身份后返回授权码（Authorization Code）到客户端指定回调地址&lt;/li>
&lt;li>客户端携带授权码与客户端凭证向授权服务器请求访问令牌&lt;/li>
&lt;li>授权服务器验证通过后返回访问令牌与刷新令牌&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>PKCE增强流程&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>客户端生成随机&lt;code>code_verifier&lt;/code>并计算&lt;code>code_challenge&lt;/code>（S256哈希）&lt;/li>
&lt;li>初次请求携带&lt;code>code_challenge&lt;/code>和&lt;code>code_challenge_method&lt;/code>&lt;/li>
&lt;li>令牌请求时提交原始&lt;code>code_verifier&lt;/code>&lt;/li>
&lt;li>授权服务器验证哈希匹配性，确保请求方是原始客户端&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>隐式模式风险&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>令牌通过URL片段直接暴露，易被浏览器历史记录、Referer头泄露&lt;/li>
&lt;li>缺乏客户端认证环节，无法防范恶意客户端仿冒&lt;/li>
&lt;li>无刷新令牌机制导致长期权限控制能力薄弱&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>混淆前端通道与后端通道的安全边界&lt;/li>
&lt;li>误认为redirect_uri参数可完全防御重定向攻击&lt;/li>
&lt;li>未正确处理PKCE的code_verifier随机性要求&lt;/li>
&lt;/ul>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>OAuth2.0授权码模式通过双重验证确保安全性：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>授权请求阶段&lt;/strong>：客户端引导用户访问授权端点，通过&lt;code>response_type=code&lt;/code>声明使用授权码模式，附加PKCE的&lt;code>code_challenge&lt;/code>参数&lt;/li>
&lt;li>&lt;strong>授权码颁发&lt;/strong>：用户认证通过后，授权服务器生成一次性授权码，通过302重定向返回给客户端回调端点&lt;/li>
&lt;li>&lt;strong>令牌交换阶段&lt;/strong>：客户端在后端通道用授权码+&lt;code>code_verifier&lt;/code>换取访问令牌，授权服务器验证哈希匹配性后发放令牌&lt;/li>
&lt;li>&lt;strong>资源访问&lt;/strong>：客户端携带访问令牌访问资源服务器，资源服务器通过令牌自省验证权限&lt;/li>
&lt;/ol>
&lt;p>PKCE扩展通过密码学绑定机制防止授权码拦截：攻击者截获授权码后，因缺少原始&lt;code>code_verifier&lt;/code>无法完成令牌交换。&lt;/p>
&lt;p>隐式模式因直接在前端通道传递令牌，面临令牌泄露、权限过度开放等风险，现已被OAuth 2.1规范废弃，推荐使用增强型授权码模式。&lt;/p>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="pkce实现示例">PKCE实现示例 &lt;a href="#pkce%e5%ae%9e%e7%8e%b0%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="80c2c73" class="language-javascript ">
 &lt;code>// 生成符合RFC7636规范的code_verifier
function generateCodeVerifier() {
 const array = new Uint8Array(32);
 crypto.getRandomValues(array);
 return base64urlencode(Buffer.from(array));
}

// 计算code_challenge
async function createCodeChallenge(verifier) {
 const encoder = new TextEncoder();
 const data = encoder.encode(verifier);
 const digest = await crypto.subtle.digest(&amp;#39;SHA-256&amp;#39;, data);
 return base64urlencode(Buffer.from(digest));
}

// 授权请求构造
const authorizeUrl = new URL(&amp;#39;https://auth-server/authorize&amp;#39;);
authorizeUrl.searchParams.set(&amp;#39;code_challenge&amp;#39;, await createCodeChallenge(verifier));
authorizeUrl.searchParams.set(&amp;#39;code_challenge_method&amp;#39;, &amp;#39;S256&amp;#39;);
// 其他标准参数...

// 令牌请求示例
const tokenResponse = await fetch(&amp;#39;https://auth-server/token&amp;#39;, {
 method: &amp;#39;POST&amp;#39;,
 body: new URLSearchParams({
 code_verifier: storedVerifier,
 // 其他标准参数...
 })
});&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="安全实践建议">安全实践建议 &lt;a href="#%e5%ae%89%e5%85%a8%e5%ae%9e%e8%b7%b5%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>客户端必须存储&lt;code>code_verifier&lt;/code>到安全存储（iOS Keychain/Android Keystore）&lt;/li>
&lt;li>强制使用S256哈希算法替代明文传输&lt;/li>
&lt;li>授权码有效期应缩短至10分钟内&lt;/li>
&lt;li>严格验证redirect_uri与注册信息完全匹配&lt;/li>
&lt;/ul>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>State参数的作用及安全处理？&lt;/strong>
防CSRF攻击，需使用加密随机数并服务端验证匹配性&lt;/p></description></item><item><title>WebAssembly性能优化场景</title><link>https://fe-interview.pangcy.cn/docs/network/network-30/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-30/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>WebAssembly底层原理理解&lt;/strong>：掌握Wasm的模块结构、内存模型及执行机制&lt;/li>
&lt;li>&lt;strong>性能优化判断力&lt;/strong>：识别Wasm在计算密集型场景的性能优势边界&lt;/li>
&lt;li>&lt;strong>跨语言互操作能力&lt;/strong>：理解JS与Wasm的交互模式及数据传递机制&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>技术评估点&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>线性内存（Linear Memory）与TypedArray的交互原理&lt;/li>
&lt;li>静态类型系统带来的编译优化优势&lt;/li>
&lt;li>SIMD指令在多媒体处理中的应用&lt;/li>
&lt;li>多线程支持（如：pthreads + Worker）的实现方式&lt;/li>
&lt;li>与JavaScript的互操作成本（数据传递/函数调用）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>关键知识点&lt;/strong>：&lt;br>
内存管理 &amp;gt; SIMD指令 &amp;gt; 线程模型 &amp;gt; 类型系统 &amp;gt; JS互操作&lt;/p>
&lt;p>&lt;strong>原理剖析&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>内存模型&lt;/strong>：Wasm使用连续字节数组的线性内存，与JS通过ArrayBuffer交互。例如处理1024x1024图像时，Rust可直接操作内存地址，而JS需要通过Canvas的ImageData接口进行多层抽象&lt;/li>
&lt;li>&lt;strong>类型系统&lt;/strong>：Rust/C++的静态类型允许编译器进行SSE/AVX指令级优化，而JS的动态类型需在JIT阶段推断类型&lt;/li>
&lt;li>&lt;strong>并行计算&lt;/strong>：通过SharedArrayBuffer实现多线程内存共享，C++线程池编译为Wasm后，配合Web Workers可实现物理仿真中的并行碰撞检测&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>常见误区&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>盲目使用Wasm处理DOM操作（实际性能可能低于JS）&lt;/li>
&lt;li>忽略内存拷贝开销（直接操作内存指针 vs 频繁数据传递）&lt;/li>
&lt;li>错误估计SIMD加速比（需硬件支持和算法适配）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>&lt;strong>WebAssembly在图像处理中的优势&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="214c373" class="language-rust ">
 &lt;code>// Rust端：灰度处理核心算法
#[wasm_bindgen]
pub fn grayscale(ptr: *mut u8, len: usize) {
 let pixels = unsafe { std::slice::from_raw_parts_mut(ptr, len) };
 // SIMD加速计算（假设RGBA格式）
 pixels.chunks_exact_mut(4).for_each(|chunk| {
 let avg = (chunk[0] as f32 * 0.3 &amp;#43; chunk[1] as f32 * 0.59 &amp;#43; chunk[2] as f32 * 0.11) as u8;
 chunk[..3].fill(avg);
 });
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>JS互操作示例&lt;/strong>：&lt;/p></description></item><item><title>SSE与WebSocket协议对比</title><link>https://fe-interview.pangcy.cn/docs/network/network-31/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-31/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>网络协议理解&lt;/strong>：准确区分HTTP长连接与WebSocket协议在OSI模型中的层级差异&lt;/li>
&lt;li>&lt;strong>实时通信机制&lt;/strong>：掌握服务端推送技术与全双工通信的本质区别&lt;/li>
&lt;li>&lt;strong>技术选型能力&lt;/strong>：根据场景特征选择合适通信方案的系统思维&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>协议栈层级差异（HTTP-based vs TCP-based）&lt;/li>
&lt;li>数据传输方向特性（单工 vs 全双工）&lt;/li>
&lt;li>连接建立方式与握手过程&lt;/li>
&lt;li>数据格式与传输效率对比&lt;/li>
&lt;li>浏览器兼容性与失败恢复机制&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>协议基础：SSE基于HTTP/1.1长连接，WebSocket采用独立协议&lt;/li>
&lt;li>连接方向：SSE单向服务端推送，WebSocket双向实时通道&lt;/li>
&lt;li>数据封装：SSE使用文本流，WebSocket支持二进制帧&lt;/li>
&lt;li>连接管理：SSE自动重连机制，WebSocket需手动处理&lt;/li>
&lt;li>协议开销：SSE头信息冗余，WebSocket握手后净荷高效&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>SSE（Server-Sent Events）&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>基于HTTP长连接，通过&lt;code>text/event-stream&lt;/code>MIME类型建立持久连接&lt;/li>
&lt;li>服务端通过&lt;code>EventSource&lt;/code>API持续发送UTF-8文本数据流&lt;/li>
&lt;li>内置断线重连机制（&lt;code>retry&lt;/code>字段控制间隔）&lt;/li>
&lt;li>通信模型类比&amp;quot;广播电台&amp;quot;：服务端单向发布，客户端被动接收&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>WebSocket&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>独立协议（ws://, wss://），通过HTTP Upgrade机制建立连接&lt;/li>
&lt;li>全双工通信，支持二进制帧传输（帧结构包含FIN/RSV/Opcode等控制位）&lt;/li>
&lt;li>需手动处理连接保持与异常恢复&lt;/li>
&lt;li>通信模型类似&amp;quot;电话通话&amp;quot;：双方可随时主动交流&lt;/li>
&lt;/ul>
&lt;pre class="mermaid">graph TD
 A[客户端] --&amp;gt;|HTTP GET /stream| B[服务端]
 B --&amp;gt;|保持TCP连接| A
 B --&amp;gt;|持续发送event/data| A
&lt;/pre>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>误认为SSE不能跨域（实际支持CORS）&lt;/li>
&lt;li>混淆SSE与长轮询机制（SSE是持久连接而非轮询）&lt;/li>
&lt;li>低估WebSocket协议复杂度（需处理ping/pong帧维持连接）&lt;/li>
&lt;/ol>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>SSE与WebSocket的核心差异体现在协议层与通信模式：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>协议基础&lt;/strong>：SSE基于HTTP长连接，利用简单文本流传输；WebSocket是独立协议，建立后脱离HTTP上下文&lt;/li>
&lt;li>&lt;strong>通信方向&lt;/strong>：SSE仅支持服务端到客户端的单向推送，WebSocket支持双向实时通信&lt;/li>
&lt;li>&lt;strong>数据传输&lt;/strong>：SSE默认UTF-8文本，WebSocket支持二进制帧且头部开销更小&lt;/li>
&lt;li>&lt;strong>连接管理&lt;/strong>：SSE内置自动重连，WebSocket需手动实现心跳检测&lt;/li>
&lt;li>&lt;strong>使用场景&lt;/strong>：SSE适合股票行情、新闻推送等单向通知场景；WebSocket适用于聊天室、在线协作等双向交互场景&lt;/li>
&lt;/ol>
&lt;p>SSE的核心优势在于：&lt;/p>
&lt;ul>
&lt;li>天然兼容HTTP生态（身份认证/缓存/代理）&lt;/li>
&lt;li>零延迟消息推送（长连接保持）&lt;/li>
&lt;li>自动错误恢复降低开发成本&lt;/li>
&lt;/ul>
&lt;p>WebSocket的不可替代性体现在：&lt;/p></description></item><item><title>常见HTTP请求头作用详解</title><link>https://fe-interview.pangcy.cn/docs/network/network-32/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-32/</guid><description>&lt;h2 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;/h2>&lt;p>本题考查候选人三个核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>HTTP协议基础&lt;/strong>：对RFC标准定义的关键请求头的理解深度&lt;/li>
&lt;li>&lt;strong>内容协商机制&lt;/strong>：理解客户端与服务端通过HTTP头进行内容协商的过程&lt;/li>
&lt;li>&lt;strong>实战经验&lt;/strong>：实际开发中对浏览器兼容性和网络优化的处理经验&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>常用请求头的适用场景及规范（Accept系列头与Content系列头的对应关系）&lt;/li>
&lt;li>编码协商流程中请求头与响应头的协作机制&lt;/li>
&lt;li>多编码格式的优先级处理及降级方案&lt;/li>
&lt;li>跨浏览器支持的压缩算法选择策略&lt;/li>
&lt;/ul>
&lt;h2 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;/h2>&lt;h3 id="关键知识点优先级">关键知识点优先级 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>内容协商 &amp;gt; 安全认证 &amp;gt; 数据格式定义&lt;/li>
&lt;li>编码压缩协同 &amp;gt; 浏览器兼容处理&lt;/li>
&lt;/ol>
&lt;h3 id="核心机制剖析">核心机制剖析 &lt;a href="#%e6%a0%b8%e5%bf%83%e6%9c%ba%e5%88%b6%e5%89%96%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>Accept与Content-Type&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>&lt;code>Accept&lt;/code>请求头：客户端声明可处理的MIME类型及优先级（如&lt;code>text/html;q=0.9&lt;/code>）&lt;/li>
&lt;li>&lt;code>Content-Type&lt;/code>实体头：实际传输数据的媒体类型，可出现在请求/响应中&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>编码协商流程&lt;/strong>&lt;/p>
&lt;ol>
&lt;li>客户端通过&lt;code>Accept-Encoding&lt;/code>发送支持的压缩算法列表（如&lt;code>gzip, deflate, br&lt;/code>）&lt;/li>
&lt;li>服务端选择算法后通过&lt;code>Content-Encoding&lt;/code>响应头确认实际使用的压缩方式&lt;/li>
&lt;li>未匹配时服务端应返回未压缩数据（空&lt;code>Content-Encoding&lt;/code>）&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>浏览器兼容陷阱&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>IE11对Brotli(br)编码支持缺失&lt;/li>
&lt;li>移动端设备可能限制特定压缩算法解码能力&lt;/li>
&lt;li>需通过&lt;code>Vary: Accept-Encoding&lt;/code>避免CDN缓存错误版本&lt;/li>
&lt;/ul>
&lt;h2 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;/h2>&lt;p>&lt;strong>常用请求头作用：&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>&lt;code>Accept&lt;/code>：声明客户端可解析的响应内容类型（MIME类型），服务端通过它进行内容类型协商&lt;/li>
&lt;li>&lt;code>Content-Type&lt;/code>：标识实际传输数据的媒体类型，请求中用于POST请求体类型，响应中描述返回数据格式&lt;/li>
&lt;li>&lt;code>Authorization&lt;/code>：携带认证凭证（如Bearer Token），用于服务端验证请求权限&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>编码协商机制：&lt;/strong>&lt;/p>
&lt;ol>
&lt;li>客户端在&lt;code>Accept-Encoding&lt;/code>中按优先级列出支持的压缩算法&lt;/li>
&lt;li>服务端选择可用算法压缩响应体，通过&lt;code>Content-Encoding&lt;/code>声明所用算法&lt;/li>
&lt;li>若服务端无法满足请求编码要求，应返回非压缩数据并忽略&lt;code>Content-Encoding&lt;/code>&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>兼容性处理：&lt;/strong>&lt;/p>
&lt;ul>
&lt;li>优先使用gzip作为通用压缩方案&lt;/li>
&lt;li>检测User-Agent适配浏览器解码能力&lt;/li>
&lt;li>服务端配置应包含多种压缩算法备选&lt;/li>
&lt;/ul>
&lt;h2 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;/h2>&lt;h3 id="服务端配置示例nodejs">服务端配置示例（Node.js） &lt;a href="#%e6%9c%8d%e5%8a%a1%e7%ab%af%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8bnodejs" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="fb9f20c" class="language-javascript ">
 &lt;code>const zlib = require(&amp;#39;zlib&amp;#39;);
const compression = require(&amp;#39;compression&amp;#39;);

// 中间件配置
app.use(compression({
 filter: (req) =&amp;gt; {
 // 排除特定浏览器不支持的br压缩
 if(req.headers[&amp;#39;user-agent&amp;#39;].includes(&amp;#39;MSIE&amp;#39;)) {
 return [&amp;#39;gzip&amp;#39;, &amp;#39;deflate&amp;#39;];
 }
 return [&amp;#39;br&amp;#39;, &amp;#39;gzip&amp;#39;, &amp;#39;deflate&amp;#39;];
 },
 level: zlib.Z_BEST_COMPRESSION // 最高压缩率
}));

// 响应头设置示例
app.get(&amp;#39;/data&amp;#39;, (req, res) =&amp;gt; {
 res.set(&amp;#39;Vary&amp;#39;, &amp;#39;Accept-Encoding&amp;#39;); // 声明响应差异化因素
 res.json({ data: &amp;#39;compressedContent&amp;#39; });
});&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化建议">优化建议 &lt;a href="#%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>动态检测客户端性能：通过&lt;code>Navigator.deviceMemory&lt;/code>判断低端设备禁用高CPU消耗的压缩算法&lt;/li>
&lt;li>静态资源预压缩：构建时生成.gz/.br版本，减少实时压缩开销&lt;/li>
&lt;li>兜底策略：始终保留未压缩版本应对不支持压缩的客户端&lt;/li>
&lt;/ol>
&lt;h2 id="五深度追问">五、深度追问 &lt;a href="#%e4%ba%94%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>Q：如何通过Accept-Language实现国际化？&lt;/strong>&lt;/p></description></item><item><title>内容编码与传输优化策略</title><link>https://fe-interview.pangcy.cn/docs/network/network-33/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-33/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：HTTP协议优化能力、服务端性能调优经验、压缩算法原理理解&lt;/p>
&lt;ol>
&lt;li>&lt;strong>压缩算法特性对比&lt;/strong>：掌握各算法压缩率/解压速度/CPU占用的权衡关系&lt;/li>
&lt;li>&lt;strong>浏览器兼容性处理&lt;/strong>：识别客户端支持的编码类型（Accept-Encoding Header）&lt;/li>
&lt;li>&lt;strong>服务端决策逻辑&lt;/strong>：动态选择压缩策略的实现方式（Nginx配置技巧）&lt;/li>
&lt;li>&lt;strong>性能优化平衡&lt;/strong>：资源压缩收益与服务器计算成本的权衡（静态预压缩 vs 动态压缩）&lt;/li>
&lt;li>&lt;strong>现代Web优化实践&lt;/strong>：Brotli与HTTP/2的配合优化策略&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>Brotli压缩率 &amp;gt; Gzip &amp;gt; Deflate&lt;br>
CPU消耗：Brotli(高) &amp;gt; Gzip(中) &amp;gt; Deflate(低)&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>Gzip&lt;/strong>：基于LZ77和哈夫曼编码，压缩级别1-9线性增长CPU消耗，适合通用场景&lt;/li>
&lt;li>&lt;strong>Deflate&lt;/strong>：与Gzip同源但实现更简单，缺少文件元数据，部分浏览器存在实现差异&lt;/li>
&lt;li>&lt;strong>Brotli&lt;/strong>：采用LZ77+静态字典预定义，压缩级别1-11，高级别需要更大字典内存&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>错误认为Deflate一定优于Gzip（实际取决于实现质量）&lt;/li>
&lt;li>忽略Brotli需要HTTPS支持的限制条件&lt;/li>
&lt;li>静态资源未使用预压缩导致动态压缩消耗CPU&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>Gzip在压缩率与CPU消耗间达到最佳平衡，Brotli在支持HTTPS的场景下可提升15%-25%压缩率但增加服务器负载，Deflate因兼容性问题建议作为备选。Nginx可通过以下配置实现智能选择：&lt;/p>
&lt;ol>
&lt;li>检测客户端支持的编码类型（Accept-Encoding）&lt;/li>
&lt;li>优先返回预压缩的.br/.gz文件&lt;/li>
&lt;li>动态压缩时按优先级选择Brotli &amp;gt; Gzip &amp;gt; Deflate&lt;/li>
&lt;li>对图片/视频等已压缩资源禁用二次压缩&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="nginx配置示例">Nginx配置示例 &lt;a href="#nginx%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="5ae2a16" class="language-nginx ">
 &lt;code>http {
 # 启用Brotli需要单独编译模块
 brotli on;
 brotli_comp_level 6;
 brotli_static on; # 启用预压缩文件检测
 
 gzip on;
 gzip_comp_level 5;
 gzip_static on;
 
 # 定义编码优先级映射
 map $http_accept_encoding $encoding {
 default gzip;
 ~*br br;
 ~*gzip gzip;
 }

 server {
 location / {
 # 动态设置响应编码类型
 add_header Vary Accept-Encoding;
 brotli $encoding; # 自动回退到gzip
 gzip $encoding; 
 
 # 静态资源处理
 location ~* \.(js|css|html)$ {
 try_files $uri $uri.br $uri.gz =404;
 }
 }
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化策略">优化策略 &lt;a href="#%e4%bc%98%e5%8c%96%e7%ad%96%e7%95%a5" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>预压缩静态资源&lt;/strong>：构建阶段生成.br/.gz文件，降低运行时CPU消耗&lt;/li>
&lt;li>&lt;strong>分级压缩策略&lt;/strong>：HTML使用Brotli最大压缩，API响应使用Gzip快速压缩&lt;/li>
&lt;li>&lt;strong>缓存控制&lt;/strong>：对压缩结果设置长期缓存头（Cache-Control: max-age）&lt;/li>
&lt;li>&lt;strong>性能监控&lt;/strong>：使用&lt;code>ngx_http_stub_status_module&lt;/code>监控压缩效率&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何验证服务端压缩是否生效？&lt;/strong>&lt;br>
&lt;code>curl -I -H &amp;quot;Accept-Encoding: br,gzip&amp;quot; http://domain.com | grep Content-Encoding&lt;/code>&lt;/p></description></item><item><title>分块传输编码实现原理</title><link>https://fe-interview.pangcy.cn/docs/network/network-34/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-34/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考核候选人以下能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>HTTP协议机制&lt;/strong>：对分块传输编码底层实现的理解&lt;/li>
&lt;li>&lt;strong>实时系统设计&lt;/strong>：流式数据传输场景的应用能力&lt;/li>
&lt;li>&lt;strong>协议规范理解&lt;/strong>：HTTP头部字段的互斥规则&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>分块编码报文格式与传输流程&lt;/li>
&lt;li>流式传输对比缓冲传输的性能优势&lt;/li>
&lt;li>Content-Length与Transfer-Encoding的互斥逻辑&lt;/li>
&lt;li>大文件分块传输的内存优化原理&lt;/li>
&lt;li>实时数据推送的延迟控制机制&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>分块编码报文结构&lt;/li>
&lt;li>流式传输控制机制&lt;/li>
&lt;li>HTTP头部字段冲突处理&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>分块编码将数据划分为多个带有长度前缀的块（Chunk），每个块格式为：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="c99085b" class="language- ">
 &lt;code>&amp;lt;HEX_LENGTH&amp;gt;\r\n
&amp;lt;CHUNK_DATA&amp;gt;\r\n&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>终止块为&lt;code>0\r\n\r\n&lt;/code>。这种结构允许服务器无需预知数据总长度即可开始传输，接收方能逐块解析处理。&lt;/p>
&lt;p>协议规定当存在&lt;code>Transfer-Encoding: chunked&lt;/code>时，必须忽略&lt;code>Content-Length&lt;/code>头字段，因为分块传输的动态特性与静态长度声明存在根本冲突。类似于快递单号追踪（分块）与包裹总重量声明（Content-Length）不能同时作为交付依据。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>错误认为分块编码需要预缓存全部数据&lt;/li>
&lt;li>混淆分块编码与HTTP/2数据帧的区别&lt;/li>
&lt;li>尝试在同一个响应中同时使用Content-Length和chunked编码&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>分块传输编码通过将数据流分割为带有长度标识的数据块实现流式传输。每个数据块包含十六进制长度值和实际数据，终结块以零长度标识。该机制允许服务器动态生成内容并即时传输，特别适用于实时数据推送（如股票行情）和大文件下载（如视频流），避免了等待完整数据生成导致的内存压力和传输延迟。根据HTTP/1.1规范，当启用分块编码时，必须省略Content-Length头字段，因两者分别代表动态与静态长度声明机制，存在根本性冲突。&lt;/p>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="编码示例nodejs">编码示例（Node.js） &lt;a href="#%e7%bc%96%e7%a0%81%e7%a4%ba%e4%be%8bnodejs" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="e6a6b46" class="language-javascript ">
 &lt;code>const http = require(&amp;#39;http&amp;#39;);

http.createServer((req, res) =&amp;gt; {
 res.writeHead(200, { 
 &amp;#39;Transfer-Encoding&amp;#39;: &amp;#39;chunked&amp;#39;,
 &amp;#39;Content-Type&amp;#39;: &amp;#39;text/plain&amp;#39;
 });
 
 // 模拟实时数据生成
 const chunks = [&amp;#39;First&amp;#39;, &amp;#39;Second&amp;#39;, &amp;#39;Third&amp;#39;];
 let index = 0;
 
 const sendChunk = () =&amp;gt; {
 if (index &amp;gt;= chunks.length) {
 res.end(&amp;#39;0\r\n\r\n&amp;#39;); // 终止块
 return;
 }
 
 const chunk = chunks[index&amp;#43;&amp;#43;];
 // 按规范构造块数据：长度(HEX) &amp;#43; 内容
 res.write(`${chunk.length.toString(16)}\r\n${chunk}\r\n`);
 setTimeout(sendChunk, 1000); // 模拟流式间隔
 };
 
 sendChunk();
}).listen(3000);&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化建议">优化建议 &lt;a href="#%e4%bc%98%e5%8c%96%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>内存优化&lt;/strong>：使用流式读取避免大文件完全加载&lt;/li>
&lt;li>&lt;strong>优先级控制&lt;/strong>：通过调整块大小平衡延迟与吞吐量&lt;/li>
&lt;li>&lt;strong>错误恢复&lt;/strong>：实现CRC校验块确保数据传输完整性&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何检测分块传输完成？&lt;/strong>&lt;/p></description></item><item><title>预检请求触发条件与优化</title><link>https://fe-interview.pangcy.cn/docs/network/network-35/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-35/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：跨域请求机制理解、HTTP协议规范掌握、性能优化实践能力&lt;br>
&lt;strong>技术评估点&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>区分简单请求与预检请求的触发条件&lt;/li>
&lt;li>掌握CORS预检缓存机制及优化手段&lt;/li>
&lt;li>准确记忆简单请求的3个严格限制条件&lt;/li>
&lt;li>理解浏览器安全策略与性能优化的平衡&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>CORS预检机制 &amp;gt; 简单请求判定条件 &amp;gt; Access-Control-Max-Age优化&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>浏览器执行跨域请求时，根据请求特征决定是否触发预检（Preflight）：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>非简单请求&lt;/strong>会触发OPTIONS预检，包括：&lt;/p>
&lt;ul>
&lt;li>使用PUT/DELETE/PATCH方法&lt;/li>
&lt;li>包含自定义请求头（如Authorization）&lt;/li>
&lt;li>Content-Type非以下值：&lt;br>
&lt;code>text/plain&lt;/code> &lt;code>multipart/form-data&lt;/code> &lt;code>application/x-www-form-urlencoded&lt;/code>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>Access-Control-Max-Age&lt;/strong>响应头设置缓存时间（秒），使浏览器在有效期内复用预检结果，减少OPTIONS请求次数。该值过大会导致策略更新延迟，建议设置为合理时间（如2小时=7200）。&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>简单请求&lt;/strong>必须同时满足：&lt;/p>
&lt;ul>
&lt;li>方法为GET/HEAD/POST&lt;/li>
&lt;li>仅包含以下头：&lt;br>
&lt;code>Accept&lt;/code> &lt;code>Accept-Language&lt;/code> &lt;code>Content-Language&lt;/code> &lt;code>Content-Type&lt;/code>&lt;/li>
&lt;li>Content-Type为上述三个允许值&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误认为所有POST请求都是简单请求&lt;/li>
&lt;li>忽略Content-Type中字符编码的影响（如&lt;code>application/json;charset=UTF-8&lt;/code>仍会触发预检）&lt;/li>
&lt;li>混淆预检缓存与实际请求缓存机制&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>&lt;strong>触发OPTIONS的条件&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>使用PUT/DELETE/PATCH方法&lt;/li>
&lt;li>包含自定义请求头&lt;/li>
&lt;li>Content-Type非标准值（如application/json）&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>Access-Control-Max-Age优化&lt;/strong>：&lt;br>
设置响应头&lt;code>Access-Control-Max-Age: 7200&lt;/code>，使2小时内同源请求跳过预检阶段。需注意服务端配置变更时客户端缓存未过期导致的策略失效问题。&lt;/p>
&lt;p>&lt;strong>简单请求条件&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>方法限制：GET/HEAD/POST&lt;/li>
&lt;li>头部限制：仅允许标准头集合&lt;/li>
&lt;li>Content-Type限制：特定MIME类型且无额外参数&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="179316d" class="language-javascript ">
 &lt;code>// 后端CORS配置示例（Node.js）
const express = require(&amp;#39;express&amp;#39;);
const app = express();

// 处理预检请求
app.options(&amp;#39;/api&amp;#39;, (req, res) =&amp;gt; {
 res.header(&amp;#39;Access-Control-Allow-Origin&amp;#39;, &amp;#39;*&amp;#39;)
 .header(&amp;#39;Access-Control-Allow-Methods&amp;#39;, &amp;#39;GET,POST,PUT&amp;#39;)
 .header(&amp;#39;Access-Control-Allow-Headers&amp;#39;, &amp;#39;Content-Type,Authorization&amp;#39;)
 .header(&amp;#39;Access-Control-Max-Age&amp;#39;, 7200) // 2小时缓存
 .send();
});

// 处理实际请求
app.post(&amp;#39;/api&amp;#39;, (req, res) =&amp;gt; {
 res.header(&amp;#39;Access-Control-Allow-Origin&amp;#39;, &amp;#39;*&amp;#39;).json({ data: &amp;#39;ok&amp;#39; });
});&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>复杂度优化&lt;/strong>：&lt;/p></description></item><item><title>文件上传协议实现方案</title><link>https://fe-interview.pangcy.cn/docs/network/network-36/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-36/</guid><description>&lt;h2 id="文件上传协议实现方案解析">文件上传协议实现方案解析 &lt;a href="#%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%8d%8f%e8%ae%ae%e5%ae%9e%e7%8e%b0%e6%96%b9%e6%a1%88%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;hr>
&lt;h3 id="考察点分析">考察点分析 &lt;a href="#%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>：网络协议理解、现代API运用、性能优化思维&lt;/p>
&lt;ol>
&lt;li>&lt;strong>协议选择能力&lt;/strong>：区分&lt;code>multipart/form-data&lt;/code>与二进制流传输的核心差异及适用场景&lt;/li>
&lt;li>&lt;strong>现代API掌握&lt;/strong>：FormData对象操作与XMLHttpRequest/Fetch API集成&lt;/li>
&lt;li>&lt;strong>交互体验优化&lt;/strong>：多文件并发处理与上传进度监控实现&lt;/li>
&lt;li>&lt;strong>性能权衡意识&lt;/strong>：大文件传输策略与网络资源消耗控制&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h3 id="技术解析">技术解析 &lt;a href="#%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;h4 id="关键知识点优先级">关键知识点优先级 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ol>
&lt;li>Content-Type规范 &amp;gt; FormData操作 &amp;gt; 进度监控API&lt;/li>
&lt;li>传输效率对比 &amp;gt; 数据格式差异 &amp;gt; 浏览器兼容性&lt;/li>
&lt;/ol>
&lt;h4 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;p>&lt;strong>multipart/form-data&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>
&lt;p>通过boundary分隔符组织复合数据，适合表单含文件+文本混合提交&lt;/p>
&lt;/li>
&lt;li>
&lt;p>HTTP头示例：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="3b01d02" class="language-http ">
 &lt;code>Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;/li>
&lt;li>
&lt;p>报文结构：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="e0a65fd" class="language- ">
 &lt;code>--boundary
Content-Disposition: form-data; name=&amp;#34;file&amp;#34;; filename=&amp;#34;a.jpg&amp;#34;
Content-Type: image/jpeg

[BINARY DATA]
--boundary--&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>二进制流直传&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>直接发送文件Buffer，Content-Type设为文件类型（如&lt;code>image/png&lt;/code>）&lt;/li>
&lt;li>适用于纯文件传输场景，节省分隔符带来的传输开销&lt;/li>
&lt;li>需通过&lt;code>Blob API&lt;/code>处理二进制数据&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>进度监控&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="f083f02" class="language-javascript ">
 &lt;code>xhr.upload.onprogress = (e) =&amp;gt; {
 const percent = Math.round((e.loaded / e.total) * 100)
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h4 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ol>
&lt;li>误用&lt;code>application/json&lt;/code>传输文件&lt;/li>
&lt;li>未设置&lt;code>enctype=&amp;quot;multipart/form-data&amp;quot;&lt;/code>导致服务端无法解析&lt;/li>
&lt;li>进度百分比计算未处理&lt;code>e.total=0&lt;/code>的边界情况&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h3 id="问题解答">问题解答 &lt;a href="#%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;/p></description></item><item><title>对称与非对称加密算法对比</title><link>https://fe-interview.pangcy.cn/docs/network/network-37/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-37/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考核以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>密码学基础理解&lt;/strong>：区分对称与非对称加密的核心差异及适用场景&lt;/li>
&lt;li>&lt;strong>性能优化意识&lt;/strong>：评估不同加密算法在资源受限环境下的选型依据&lt;/li>
&lt;li>&lt;strong>移动端特性认知&lt;/strong>：理解移动设备硬件限制对加密算法选择的影响&lt;/li>
&lt;/ol>
&lt;p>技术评估点：&lt;/p>
&lt;ul>
&lt;li>密钥分发机制差异&lt;/li>
&lt;li>加解密速度与数据吞吐量关系&lt;/li>
&lt;li>密钥长度与安全性的平衡&lt;/li>
&lt;li>椭圆曲线数学的效能优势&lt;/li>
&lt;li>移动端资源约束下的算法选择&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>密钥管理机制 &amp;gt; 数学基础差异 &amp;gt; 计算复杂度 &amp;gt; 移动端优化&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>AES（对称）&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>基于置换-置换网络（SPN）结构&lt;/li>
&lt;li>密钥长度：128/192/256位&lt;/li>
&lt;li>加解密使用相同密钥，需安全通道传输密钥&lt;/li>
&lt;li>适合大数据量加密，时间复杂度O(n)&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>RSA（非对称）&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>基于大整数分解难题&lt;/li>
&lt;li>密钥长度：≥2048位（推荐）&lt;/li>
&lt;li>公钥加密私钥解密，无需传输私钥&lt;/li>
&lt;li>密钥生成耗时，加解密速度较慢（时间复杂度O(k^3)）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>ECC（椭圆曲线）&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>基于椭圆曲线离散对数问题&lt;/li>
&lt;li>160位ECC ≈ 1024位RSA安全性&lt;/li>
&lt;li>更小的密钥尺寸降低计算负载&lt;/li>
&lt;li>移动端性能优势：减少30%-50%计算时间&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>混淆密钥交换与数据加密场景&lt;/li>
&lt;li>误认为非对称加密可完全替代对称加密&lt;/li>
&lt;li>忽视密钥长度与算法安全性的动态演进关系&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>AES与RSA的核心差异体现在：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>密钥管理&lt;/strong>：AES要求安全信道传输密钥，RSA通过公私钥分离解决密钥分发&lt;/li>
&lt;li>&lt;strong>运算速度&lt;/strong>：AES的吞吐量是RSA的1000倍以上，适合数据加密&lt;/li>
&lt;li>&lt;strong>安全性&lt;/strong>：RSA安全性依赖大数分解，AES依赖密钥长度，而ECC在更短密钥长度下提供同等安全&lt;/li>
&lt;/ol>
&lt;p>ECC在移动端的优势：&lt;/p>
&lt;ul>
&lt;li>更小的密钥尺寸（256位ECC=3072位RSA安全等级）&lt;/li>
&lt;li>降低50%内存占用&lt;/li>
&lt;li>减少移动端CPU计算压力，提升TLS握手速度&lt;/li>
&lt;li>支持更高效的数字签名（ECDSA）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="混合加密示例nodejs">混合加密示例（Node.js） &lt;a href="#%e6%b7%b7%e5%90%88%e5%8a%a0%e5%af%86%e7%a4%ba%e4%be%8bnodejs" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="3503c3e" class="language-javascript ">
 &lt;code>// 生成ECC密钥对
const { generateKeyPairSync } = require(&amp;#39;crypto&amp;#39;);
const { publicKey, privateKey } = generateKeyPairSync(&amp;#39;ec&amp;#39;, {
 namedCurve: &amp;#39;secp256k1&amp;#39; // 比特币使用的曲线
});

// AES加密大文件
const crypto = require(&amp;#39;crypto&amp;#39;);
const aesKey = crypto.randomBytes(32); // AES-256

function encryptData(data) {
 const iv = crypto.randomBytes(16);
 const cipher = crypto.createCipheriv(&amp;#39;aes-256-gcm&amp;#39;, aesKey, iv);
 return Buffer.concat([iv, cipher.update(data), cipher.final()]);
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="优化策略">优化策略 &lt;a href="#%e4%bc%98%e5%8c%96%e7%ad%96%e7%95%a5" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>会话复用&lt;/strong>：TLS会话票据减少密钥协商次数&lt;/li>
&lt;li>&lt;strong>硬件加速&lt;/strong>：使用WebCrypto API调用硬件加密模块&lt;/li>
&lt;li>&lt;strong>算法协商&lt;/strong>：根据设备性能动态选择加密套件&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何防御量子计算攻击？&lt;/strong>
答：结合Lattice-based等抗量子算法&lt;/p></description></item><item><title>数字签名与证书链验证</title><link>https://fe-interview.pangcy.cn/docs/network/network-38/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-38/</guid><description>&lt;h2 id="数字签名与证书链验证解析">数字签名与证书链验证解析 &lt;a href="#%e6%95%b0%e5%ad%97%e7%ad%be%e5%90%8d%e4%b8%8e%e8%af%81%e4%b9%a6%e9%93%be%e9%aa%8c%e8%af%81%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;hr>
&lt;h3 id="考察点分析">考察点分析 &lt;a href="#%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>：&lt;/p>
&lt;ol>
&lt;li>密码学基础：非对称加密体系的应用理解&lt;/li>
&lt;li>网络安全机制：HTTPS握手过程核心环节&lt;/li>
&lt;li>信任链体系：PKI（公钥基础设施）架构认知&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>技术评估点&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>数字签名算法（RSA/ECDSA）实现原理&lt;/li>
&lt;li>证书链逐级验证过程&lt;/li>
&lt;li>根证书预置信任机制&lt;/li>
&lt;li>哈希算法防篡改机制&lt;/li>
&lt;li>证书吊销状态检查（CRL/OCSP）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h3 id="技术解析">技术解析 &lt;a href="#%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; X.509证书结构 &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;ul>
&lt;li>发送方使用SHA-256计算数据哈希值&lt;/li>
&lt;li>用私钥加密哈希值生成数字签名&lt;/li>
&lt;li>附加原始数据与签名形成完整消息&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>签名验证&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>接收方分离原始数据和签名&lt;/li>
&lt;li>使用发送方公钥解密签名得到哈希值A&lt;/li>
&lt;li>重新计算原始数据哈希值得出哈希值B&lt;/li>
&lt;li>对比哈希值A与B验证数据完整性&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>证书链验证&lt;/strong>：&lt;/p>
&lt;pre class="mermaid">graph LR
ServerCert --&amp;gt;|由| IntermediateCA
IntermediateCA --&amp;gt;|由| RootCA
RootCA --&amp;gt;|预置在| TrustStore
&lt;/pre>
&lt;ul>
&lt;li>浏览器逐级验证证书签名有效性&lt;/li>
&lt;li>检查证书有效期和域名匹配&lt;/li>
&lt;li>确认根证书在可信存储库中&lt;/li>
&lt;li>验证证书未被吊销（CRL/OCSP）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>常见误区&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>误认为证书加密传输数据（实际用于密钥交换）&lt;/li>
&lt;li>忽略证书链中间环节验证&lt;/li>
&lt;li>混淆代码签名证书与SSL证书应用场景&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h3 id="问题解答">问题解答 &lt;a href="#%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;/p>
&lt;hr>
&lt;h3 id="解决方案">解决方案 &lt;a href="#%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>证书验证流程伪代码&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="8865093" class="language-javascript ">
 &lt;code>function verifyCertificate(certChain) {
 // 从服务端证书开始逐级验证
 let currentCert = certChain[].publicKey)
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>优化建议&lt;/strong>：&lt;/p></description></item><item><title>TLS协议版本演进与兼容性</title><link>https://fe-interview.pangcy.cn/docs/network/network-39/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-39/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>本题主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>安全协议演进理解&lt;/strong>：对比不同版本加密协议的核心改进点&lt;/li>
&lt;li>&lt;strong>安全攻防认知&lt;/strong>：识别历史漏洞与协议改进的因果关系&lt;/li>
&lt;li>&lt;strong>工程实践能力&lt;/strong>：服务器安全配置的实操经验&lt;/li>
&lt;/ol>
&lt;p>技术评估点：&lt;/p>
&lt;ul>
&lt;li>前向保密机制（Forward Secrecy）的实现演进&lt;/li>
&lt;li>加密套件的算法升级（如CBC到AEAD）&lt;/li>
&lt;li>握手协议的性能优化（如TLS 1.3的1-RTT）&lt;/li>
&lt;li>协议降级攻击的防御方案&lt;/li>
&lt;li>服务端安全配置最佳实践&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>TLS 1.3 &amp;gt; 前向保密 &amp;gt; AEAD加密 &amp;gt; 握手优化 &amp;gt; 协议降级防御&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>SSL 3.0缺陷&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>使用CBC模式的块加密，存在POODLE攻击风险（Padding Oracle On Downgraded Legacy Encryption）&lt;/li>
&lt;li>静态RSA密钥交换，缺乏前向保密&lt;/li>
&lt;li>支持弱加密套件（如RC4）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>TLS 1.2改进&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>支持AEAD加密模式（如AES-GCM），杜绝填充预言攻击&lt;/li>
&lt;li>引入ECDHE密钥交换，实现前向保密&lt;/li>
&lt;li>定义更严格的加密套件协商机制&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>TLS 1.3革新&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>强制前向保密，废除静态RSA&lt;/li>
&lt;li>握手时间缩短至1-RTT（0-RTT可选）&lt;/li>
&lt;li>移除不安全算法（MD5/SHA-1/RC4）&lt;/li>
&lt;li>内置防降级机制，阻止协商旧协议&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>认为禁用SSLv3即可完全防御POODLE（需同时禁用CBC模式套件）&lt;/li>
&lt;li>混淆前向保密（FS）与完全前向保密（PFS）&lt;/li>
&lt;li>忽视TLS协议版本与加密套件的组合配置&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>SSL 3.0（1996）与TLS 1.2（2008）/1.3（2018）的核心安全差异体现在：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>加密机制&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>SSL 3.0使用CBC模式易受填充攻击，TLS 1.2+采用AEAD模式（如AES-GCM）&lt;/li>
&lt;li>TLS 1.3废除RC4/DES等弱算法，仅保留AES/ChaCha20&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>密钥交换&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>TLS 1.2默认支持ECDHE实现前向保密，TLS 1.3彻底移除静态RSA&lt;/li>
&lt;li>TLS 1.3将密钥交换与认证分离，强化安全性&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>握手协议&lt;/strong>：&lt;/p></description></item><item><title>HTTPS混合加密工作流程</title><link>https://fe-interview.pangcy.cn/docs/network/network-40/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-40/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>【核心能力维度】&lt;/strong>&lt;br>
本题考察对HTTPS核心安全机制的理解，重点评估以下能力：&lt;/p>
&lt;ol>
&lt;li>密码学基础：非对称/对称加密的应用场景与优劣判断&lt;/li>
&lt;li>协议级安全设计：TLS握手流程的阶段性目标把控&lt;/li>
&lt;li>纵深防御思维：前向保密机制的设计哲学与实现路径&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>技术评估点&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>混合加密体系的工作原理及必要性&lt;/li>
&lt;li>Diffie-Hellman密钥交换协议的实际应用&lt;/li>
&lt;li>会话密钥(Session Key)的生成逻辑&lt;/li>
&lt;li>前向保密与长期密钥的关联关系&lt;/li>
&lt;li>被动攻击与密钥泄露场景下的防护策略&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>TLS握手 &amp;gt; 非对称加密 &amp;gt; Diffie-Hellman &amp;gt; 前向保密 &amp;gt; 会话密钥&lt;/p>
&lt;h4 id="混合加密流程">混合加密流程 &lt;a href="#%e6%b7%b7%e5%90%88%e5%8a%a0%e5%af%86%e6%b5%81%e7%a8%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ol>
&lt;li>&lt;strong>非对称阶段&lt;/strong>：客户端使用服务器公钥加密预主密钥（Pre-Master Secret），确保密钥传输安全&lt;/li>
&lt;li>&lt;strong>对称阶段&lt;/strong>：双方基于预主密钥生成会话密钥（Master Secret），后续通信使用对称加密算法（如AES）&lt;/li>
&lt;li>&lt;strong>效率平衡&lt;/strong>：非对称加密解决密钥分发问题（1次），对称加密处理数据加密（N次），兼顾安全与性能&lt;/li>
&lt;/ol>
&lt;h4 id="前向保密实现">前向保密实现 &lt;a href="#%e5%89%8d%e5%90%91%e4%bf%9d%e5%af%86%e5%ae%9e%e7%8e%b0" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;p>通过&lt;strong>临时密钥对&lt;/strong>实现会话独立性：&lt;/p>
&lt;ol>
&lt;li>服务器在每次握手时生成临时DH参数&lt;/li>
&lt;li>客户端/服务器各自计算共享密钥（不传输）&lt;/li>
&lt;li>会话密钥基于临时参数生成，与长期私钥解耦&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>技术类比&lt;/strong>：类似一次性密码本，每个会话使用独立密钥体系，即使保险箱主钥匙丢失，已上锁的箱子仍安全&lt;/p>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>HTTPS采用混合加密体系平衡安全与效率：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>密钥交换阶段&lt;/strong>：客户端验证服务器证书后，使用其中的RSA公钥加密随机生成的预主密钥。服务器用私钥解密后，双方基于此生成相同的会话密钥（Master Secret）&lt;/li>
&lt;li>&lt;strong>数据传输阶段&lt;/strong>：使用AES等对称算法加密数据，发挥其高性能优势&lt;/li>
&lt;li>&lt;strong>前向保密保障&lt;/strong>：采用ECDHE等临时密钥算法，会话密钥由客户端随机数、服务器随机数和DH参数共同生成。即使长期私钥泄露，攻击者因缺少临时参数无法回溯历史会话密钥&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="密钥交换示例nodejs">密钥交换示例（Node.js） &lt;a href="#%e5%af%86%e9%92%a5%e4%ba%a4%e6%8d%a2%e7%a4%ba%e4%be%8bnodejs" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="807b5a1" class="language-javascript ">
 &lt;code>const { createECDH, constants } = require(&amp;#39;crypto&amp;#39;);

// 客户端流程
const clientDH = createECDH(&amp;#39;secp256k1&amp;#39;);
const clientPublic = clientDH.generateKeys();

// 服务器生成临时密钥对
const serverDH = createECDH(&amp;#39;secp256k1&amp;#39;);
serverDH.generateKeys();

// 计算共享密钥（不通过网络传输）
const clientSecret = clientDH.computeSecret(serverDH.getPublicKey());
const serverSecret = serverDH.computeSecret(clientPublic);

// 验证密钥一致性（实际协议通过HMAC验证）
console.log(clientSecret.equals(serverSecret)); // =&amp;gt; true&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>优化建议&lt;/strong>：&lt;/p></description></item><item><title>国密算法应用场景解析</title><link>https://fe-interview.pangcy.cn/docs/network/network-41/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-41/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;ol>
&lt;li>&lt;strong>核心能力维度&lt;/strong>：密码学应用能力 / 行业解决方案设计 / 合规性理解
&lt;ul>
&lt;li>密码算法原理理解（椭圆曲线/分组密码/哈希结构）&lt;/li>
&lt;li>场景适配能力（不同业务场景的加密需求差异）&lt;/li>
&lt;li>标准化认知（国密与国际标准算法对比）&lt;/li>
&lt;li>政策法规熟悉度（《密码法》/金融行业规范）&lt;/li>
&lt;li>安全攻防意识（抗量子计算/侧信道防护）&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>SM2（ECC）&amp;gt; SM4（Feistel）&amp;gt; SM3（Merkle-Damgård）&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>
&lt;p>&lt;strong>SM2&lt;/strong>：基于椭圆曲线离散对数难题，256位密钥长度下安全性等同3072位RSA。支持数字签名、密钥交换、公钥加密，核心参数采用国密局定义的特殊椭圆曲线方程&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>SM3&lt;/strong>：输出长度256位的密码杂凑算法，采用迭代压缩结构。抗碰撞强度达到2^128，采用12轮非线性处理流程，相比SHA-256具备更强的扩散性&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>SM4&lt;/strong>：分组长度128位的对称加密算法，采用32轮非线性迭代结构。密钥扩展算法生成32个轮密钥，加解密过程完全一致（对称性）&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h3 id="替代方案对比">替代方案对比 &lt;a href="#%e6%9b%bf%e4%bb%a3%e6%96%b9%e6%a1%88%e5%af%b9%e6%af%94" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>国密算法&lt;/th>
 &lt;th>国际标准&lt;/th>
 &lt;th>密钥长度&lt;/th>
 &lt;th>性能基准（同等安全强度）&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>SM2&lt;/td>
 &lt;td>RSA 3072&lt;/td>
 &lt;td>256-bit&lt;/td>
 &lt;td>签名快15倍&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>SM4&lt;/td>
 &lt;td>AES-256&lt;/td>
 &lt;td>128-bit&lt;/td>
 &lt;td>软件实现慢20%&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>SM3&lt;/td>
 &lt;td>SHA-256&lt;/td>
 &lt;td>256-bit&lt;/td>
 &lt;td>吞吐量高18%&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>在金融领域，SM2广泛用于移动支付数字证书（如银联TEE环境），SM4保障ATM机交易报文加密，SM3用于征信数据指纹生成。政务场景中，SM2支撑电子营业执照签名，SM4加密政务云敏感数据，SM3确保公民健康档案完整性。&lt;/p>
&lt;p>替代方案需分场景设计：跨境支付系统采用SM2与RSA双证书兼容境外机构；历史系统改造通过密码中间件实现国密算法透明替换；新建设施直接采用纯国密栈。央行《金融领域密码应用指导意见》明确要求支付系统2025年前完成国密改造。&lt;/p>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="电子签章系统示例">电子签章系统示例 &lt;a href="#%e7%94%b5%e5%ad%90%e7%ad%be%e7%ab%a0%e7%b3%bb%e7%bb%9f%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="40413b4" class="language-javascript ">
 &lt;code>// 采用SM2进行文档签名
import { SM2 } from &amp;#39;@tenpay/sm-crypto&amp;#39;;

// 密钥生成
const keyPair = SM2.generateKeyPairHex(); // 国密标准曲线

// 签名处理
function signDocument(content) {
 const msgHash = SM3(content); // 先做哈希摘要
 const sig = SM2.sign(msgHash, keyPair.privateKey); // 使用私钥签名
 return { content, sig, pubKey: keyPair.publicKey };
}

// 验证示例
const isValid = SM2.verify(msgHash, sig, pubKey); // 返回布尔值&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>复杂度优化&lt;/strong>：预计算椭圆曲线基点倍点运算，缓存常用参数提升签名性能。采用WebAssembly实现核心算法，浏览器端提速3倍。&lt;/p></description></item><item><title>DNS解析过程详解</title><link>https://fe-interview.pangcy.cn/docs/network/network-42/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-42/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：网络基础体系理解、分层架构设计认知、协议交互分析能力&lt;br>
&lt;strong>技术评估点&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>递归查询与迭代查询的核心区别与适用场景&lt;/li>
&lt;li>DNS分层解析的拓扑结构与角色分工&lt;/li>
&lt;li>本地DNS服务器的缓存机制与查询优化&lt;/li>
&lt;li>根域名服务器的引导作用与负载策略&lt;/li>
&lt;li>权威DNS的记录类型与响应逻辑&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>DNS分层解析机制 &amp;gt; 递归/迭代查询模式 &amp;gt; TTL缓存策略 &amp;gt; DNS负载均衡&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>DNS系统采用树状分层结构，解析流程分为两种模式：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>递归查询&lt;/strong>（客户端视角）：
&lt;ul>
&lt;li>客户端→本地DNS：要求&amp;quot;必须给出最终答案&amp;quot;&lt;/li>
&lt;li>本地DNS负责完成全部查询链路，类似&amp;quot;全权委托&amp;quot;&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;strong>迭代查询&lt;/strong>（服务器间协作）：
&lt;ul>
&lt;li>本地DNS逐级查询各层域名服务器&lt;/li>
&lt;li>每次查询获得下一级NS记录，类似&amp;quot;问路模式&amp;quot;&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>层级协作流程&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="f9ddd98" class="language-bash ">
 &lt;code>客户端 → 本地DNS（递归）→ 根服务器（迭代）→ 顶级域（迭代）→ 权威DNS（迭代）&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>典型解析过程&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>检查浏览器/系统缓存&lt;/li>
&lt;li>查询本地DNS服务器缓存&lt;/li>
&lt;li>本地DNS发起迭代查询：
&lt;ul>
&lt;li>根服务器返回.com顶级域NS&lt;/li>
&lt;li>.com域返回目标域授权NS&lt;/li>
&lt;li>权威DNS返回最终A记录&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>结果缓存并返回客户端&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误认为根服务器存储所有域名记录（实际仅存储顶级域NS）&lt;/li>
&lt;li>混淆DNS查询模式（客户端用递归，服务器间用迭代）&lt;/li>
&lt;li>忽略TTL缓存时效导致过时解析&lt;/li>
&lt;li>错误理解CNAME解析流程（需额外解析跳转）&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>DNS解析采用分层查询机制，递归与迭代模式协同工作。当客户端发起域名请求时，本地DNS服务器首先尝试递归解析：若缓存未命中，则代表客户端向根域名服务器发起迭代查询。根服务器返回对应顶级域（如.com）的NS记录，本地DNS继续向该顶级域查询，最终引导至目标域的权威DNS服务器获取A记录。整个过程通过层级递进和结果缓存实现高效解析，其中客户端到本地DNS采用递归模式，服务器间交互使用迭代模式。&lt;/p>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="解析流程优化">解析流程优化 &lt;a href="#%e8%a7%a3%e6%9e%90%e6%b5%81%e7%a8%8b%e4%bc%98%e5%8c%96" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="7f154be" class="language-javascript ">
 &lt;code>// 模拟DNS解析器类
class DNSResolver {
 constructor() {
 this.cache = new Map(); // 使用Map存储缓存记录
 }

 async resolve(domain) {
 // 1. 检查缓存
 if (this.cache.has(domain)) {
 const record = this.cache.get(domain);
 if (record.expiry &amp;gt; Date.now()) {
 return record.value; // 返回有效缓存
 }
 this.cache.delete(domain);
 }

 // 2. 迭代查询流程
 let currentServer = &amp;#39;root&amp;#39;; // 初始查询根服务器
 while (true) {
 const response = await this.queryServer(currentServer, domain);
 if (response.type === &amp;#39;A&amp;#39;) {
 // 4. 缓存结果（示例TTL 300秒）
 this.cache.set(domain, {
 value: response.data,
 expiry: Date.now() &amp;#43; 300000
 });
 return response.data;
 }
 // 3. 更新待查询服务器（CNAME/NX处理略）
 currentServer = response.referral;
 }
 }

 async queryServer(server, domain) {
 // 模拟服务器查询逻辑
 // 实际应实现网络请求和响应解析
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="可扩展性建议">可扩展性建议 &lt;a href="#%e5%8f%af%e6%89%a9%e5%b1%95%e6%80%a7%e5%bb%ba%e8%ae%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>&lt;strong>分布式缓存&lt;/strong>：使用Redis集群存储高频解析记录&lt;/li>
&lt;li>&lt;strong>预取策略&lt;/strong>：根据访问模式预解析关联域名&lt;/li>
&lt;li>&lt;strong>负载均衡&lt;/strong>：配置多组权威DNS实现流量分发&lt;/li>
&lt;li>&lt;strong>协议升级&lt;/strong>：支持DoH（DNS over HTTPS）增强安全性&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="深度追问">深度追问 &lt;a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;ol>
&lt;li>
&lt;p>&lt;strong>如何实现DNS记录的灰度发布？&lt;/strong>&lt;br>
通过权威DNS配置权重返回不同IP，逐步调整流量比例&lt;/p></description></item><item><title>CDN的DNS调度策略</title><link>https://fe-interview.pangcy.cn/docs/network/network-43/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-43/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>&lt;strong>核心能力维度&lt;/strong>：网络架构理解、分布式系统设计能力、性能优化思维&lt;/p>
&lt;ol>
&lt;li>&lt;strong>DNS在CDN中的作用机制&lt;/strong>：理解传统DNS与CDN调度的差异，掌握EDNS协议扩展的应用场景&lt;/li>
&lt;li>&lt;strong>地理位置路由原理&lt;/strong>：IP地理映射能力与边缘节点部署策略的协同，特别是客户端子网(ECS)扩展的应用&lt;/li>
&lt;li>&lt;strong>实时网络质量评估&lt;/strong>：BGP路由监测、延迟探测、带宽预测等动态决策依据的实现方式&lt;/li>
&lt;li>&lt;strong>负载均衡算法&lt;/strong>：节点健康检查机制与流量分配策略（加权轮询/最小连接数/一致性哈希等）&lt;/li>
&lt;li>&lt;strong>调度策略融合&lt;/strong>：多维度决策因子（成本/QoS/安全）的优先级处理与动态权重调节&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>EDNS协议 &amp;gt; IP地理数据库 &amp;gt; 网络探测技术 &amp;gt; 负载均衡算法 &amp;gt; 缓存过期策略&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>CDN调度系统通过改造递归DNS实现智能路由：&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>请求拦截&lt;/strong>：用户发起DNS查询时，CDN授权DNS服务器通过CNAME记录接管解析过程&lt;/p>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>信息收集&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>通过EDNS协议获取客户端子网信息（RFC 7871）&lt;/li>
&lt;li>查询GeoIP数据库解析用户大致位置&lt;/li>
&lt;li>实时获取各POP节点的负载率、网络质量指标&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>决策引擎&lt;/strong>：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="f1dfc9d" class="language-python ">
 &lt;code>def select_node(user_geo, network_metrics, node_stats):
 candidates = filter_nodes_by_geo(user_geo) # 地理围栏筛选
 candidates = filter_by_isp(candidates, user_isp) # 运营商匹配
 scores = calculate_scores(candidates, network_metrics) # 网络质量评分
 viable_nodes = filter_by_load(scores, node_stats) # 负载阈值过滤
 return optimal_node(-&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;/li>
&lt;li>
&lt;p>&lt;strong>结果缓存&lt;/strong>：返回TTL经过精确计算的DNS记录，平衡调度精度与DNS缓存效率&lt;/p>
&lt;/li>
&lt;/ol>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误认为DNS调度完全精准（实际受限于GeoIP精度和DNS缓存）&lt;/li>
&lt;li>忽略客户端本地DNS污染导致的路径偏离&lt;/li>
&lt;li>混淆DNS调度与Anycast路由的技术差异&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>CDN通过智能DNS解析实现最优节点路由，核心环节包括：&lt;/p></description></item><item><title>域名劫持与HTTP DNS方案</title><link>https://fe-interview.pangcy.cn/docs/network/network-44/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-44/</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="#%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;/p>
&lt;ol>
&lt;li>&lt;strong>网络协议理解&lt;/strong>：对DNS底层协议及安全风险的分析能力&lt;/li>
&lt;li>&lt;strong>新型解决方案认知&lt;/strong>：HTTP DNS工作原理及与传统架构差异的掌握程度&lt;/li>
&lt;li>&lt;strong>性能优化思维&lt;/strong>：CDN调度策略与网络加速方案的实战经验&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>DNS over UDP的中间人攻击漏洞&lt;/li>
&lt;li>HTTP DNS的加密传输机制&lt;/li>
&lt;li>EDNS客户端子网扩展的局限性&lt;/li>
&lt;li>基于真实客户端IP的CDN调度算法&lt;/li>
&lt;li>移动端网络切换的容错处理&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h3 id="技术解析">技术解析 &lt;a href="#%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;h4 id="关键知识点优先级">关键知识点优先级 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;p>HTTP DNS协议栈 &amp;gt; UDP协议安全缺陷 &amp;gt; CDN边缘计算 &amp;gt; TLS证书校验 &amp;gt; 客户端网络诊断&lt;/p>
&lt;h4 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;p>&lt;strong>传统DNS劫持风险&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>UDP协议无加密特性，响应包可被篡改&lt;/li>
&lt;li>LocalDNS可能基于策略返回非最优解析结果&lt;/li>
&lt;li>EDNS客户端子网（ECS）协议支持度不足，导致CDN调度偏差&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>HTTP DNS解决方案&lt;/strong>：&lt;/p>
&lt;pre class="mermaid">graph TD
A[客户端] --&amp;gt;|HTTPS加密请求| B(HTTP DNS服务器)
B --&amp;gt; C{策略引擎}
C --&amp;gt; D[根据客户端真实IP选择最优CDN节点]
C --&amp;gt; E[返回带TTL的解析结果]
&lt;/pre>
&lt;p>&lt;strong>精准调度实现&lt;/strong>：&lt;/p>
&lt;ol>
&lt;li>客户端携带真实IP直连HTTPDNS API&lt;/li>
&lt;li>服务端结合IP地理数据库+实时网络质量数据&lt;/li>
&lt;li>返回最低延迟/最近路径的服务器IP&lt;/li>
&lt;li>客户端本地缓存+异步更新机制&lt;/li>
&lt;/ol>
&lt;h4 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h4>&lt;ol>
&lt;li>误认为HTTPS完全杜绝DNS劫持（忽略证书伪造风险）&lt;/li>
&lt;li>混淆HTTP DNS与DoH(DNS over HTTPS)协议差异&lt;/li>
&lt;li>忽略移动网络NAT转换对IP检测的影响&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h3 id="问题解答">问题解答 &lt;a href="#%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>传统DNS使用UDP协议进行域名解析，其无状态、无加密的特性使得中间节点可篡改响应数据，典型劫持场景包括运营商广告注入、钓鱼网站重定向等。HTTP DNS通过基于HTTPS的API查询绕过LocalDNS，直接与权威DNS通信，解决三大问题：&lt;/p></description></item><item><title>IPv4与IPv6协议差异</title><link>https://fe-interview.pangcy.cn/docs/network/network-45/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-45/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>协议设计理解&lt;/strong>：对比不同网络层协议演进的核心改进&lt;/li>
&lt;li>&lt;strong>网络架构思维&lt;/strong>：分析报头结构优化对网络性能的影响&lt;/li>
&lt;li>&lt;strong>工程实践能力&lt;/strong>：评估过渡方案在真实场景中的适用性&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>IPv6地址空间扩展背后的设计哲学&lt;/li>
&lt;li>简化报头对路由效率的提升机制&lt;/li>
&lt;li>QoS实现从尽力而为到流标识的演进&lt;/li>
&lt;/ul>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点优先级">关键知识点优先级 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>地址空间扩展（128位 vs 32位）&lt;/li>
&lt;li>报头结构优化（固定40字节 vs 可变长度）&lt;/li>
&lt;li>QoS支持（流标签 vs TOS字段）&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>：IPv6的128位地址（约3.4×10³⁸个地址）不仅解决IPv4地址枯竭问题，还通过EUI-64机制实现地址自动配置，支持无状态地址分配（SLAAC）。&lt;/p>
&lt;p>&lt;strong>报头结构&lt;/strong>：IPv4报头含13个字段（包括可变长度选项），而IPv6采用固定40字节报头，移除校验和、分片相关字段，将扩展功能通过扩展报头（Extension Header）实现，提升路由处理效率。&lt;/p>
&lt;p>&lt;strong>QoS支持&lt;/strong>：IPv6的20位流标签（Flow Label）允许设备识别特定流量流，结合区分服务代码点（DSCP）实现精细化流量管理，相较IPv4的TOS字段更适应现代多媒体传输需求。&lt;/p>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>误认为IPv6只是地址更长，忽略其安全特性（强制IPsec支持）&lt;/li>
&lt;li>混淆扩展报头与IPv4选项字段的实现差异&lt;/li>
&lt;li>低估流标签在实时业务中的应用价值&lt;/li>
&lt;/ul>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>IPv4与IPv6核心差异体现在：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>地址空间&lt;/strong>：IPv4使用32位地址（约43亿个），IPv6采用128位地址，通过冒号分隔十六进制表示（如2001:db8::8a2e），支持分层路由和自动配置&lt;/li>
&lt;li>&lt;strong>报头结构&lt;/strong>：IPv6报头固定40字节，移除校验和、分片字段，路由处理效率提升40%；IPv4可变长度报头（20-60字节）包含复杂控制字段&lt;/li>
&lt;li>&lt;strong>QoS机制&lt;/strong>：IPv6的流标签支持端到端流量识别，IPv4依赖TOS字段和DiffServ扩展&lt;/li>
&lt;/ol>
&lt;p>过渡方案实现：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>双栈技术&lt;/strong>：设备同时运行IPv4/v6协议栈，通过DNS解析自动选择协议版本（AAAA记录优先）&lt;/li>
&lt;li>&lt;strong>隧道技术&lt;/strong>：将IPv6数据包封装在IPv4报文中（如6to4隧道使用IPv4地址生成IPv6前缀2002::/16），穿越纯IPv4网络&lt;/li>
&lt;/ul>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="双栈配置示例linux">双栈配置示例（Linux） &lt;a href="#%e5%8f%8c%e6%a0%88%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8blinux" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="ea0edb1" class="language-bash ">
 &lt;code># 启用IPv6
sysctl -w net.ipv6.conf.all.disable_ipv6=0

# 网络接口配置（示例）
auto eth0
iface eth0 inet static
 address 192.168.1.10
 netmask 255.255.255.0

iface eth0 inet6 static
 address 2001:db8::1/64
 gateway 2001:db8::ffff&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>优化建议&lt;/strong>：&lt;/p></description></item><item><title>反向代理与正向代理区别</title><link>https://fe-interview.pangcy.cn/docs/network/network-46/</link><pubDate>Tue, 04 Mar 2025 09:31:00 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/network/network-46/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%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;/h2>&lt;p>该题目主要考核以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>网络架构理解&lt;/strong>：区分代理类型在系统架构中的位置与作用&lt;/li>
&lt;li>&lt;strong>技术方案选型&lt;/strong>：根据场景差异选择代理方案的能力&lt;/li>
&lt;li>&lt;strong>功能原理掌握&lt;/strong>：负载均衡算法、缓存机制、访问控制等底层实现逻辑&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>正向/反向代理的流量方向差异&lt;/li>
&lt;li>客户端透明性在架构设计中的体现&lt;/li>
&lt;li>负载均衡策略与缓存失效机制&lt;/li>
&lt;li>代理服务器的安全控制维度&lt;/li>
&lt;li>TLS终止场景下的代理差异&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%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;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>OSI模型定位 &amp;gt; 流量方向 &amp;gt; 功能实现差异 &amp;gt; 安全控制层级&lt;/p>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%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>（Squid）：&lt;/p>
&lt;ul>
&lt;li>客户端显式配置的&amp;quot;中间人&amp;quot;&lt;/li>
&lt;li>流量路径：Client → Proxy Server → Internet&lt;/li>
&lt;li>匿名性通过修改请求头（X-Forwarded-For）实现&lt;/li>
&lt;li>ACL基于源IP/目标域名进行流量过滤&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>反向代理&lt;/strong>（Nginx）：&lt;/p>
&lt;ul>
&lt;li>服务端部署的&amp;quot;流量守门员&amp;quot;&lt;/li>
&lt;li>流量路径：Client → Proxy Server → Origin Servers&lt;/li>
&lt;li>负载均衡采用加权轮询/最小连接等算法&lt;/li>
&lt;li>缓存通过Proxy Store实现内容复用&lt;/li>
&lt;/ul>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ul>
&lt;li>混淆匿名方向（正向代理隐藏客户端，反向代理隐藏服务端）&lt;/li>
&lt;li>误认为反向代理不能做访问控制（实际支持IP白名单等）&lt;/li>
&lt;li>忽略SSL卸载对反向代理性能的影响&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%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;/h2>&lt;p>&lt;strong>架构定位&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>正向代理是客户端网络的延伸，反向代理是服务端架构的入口&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>客户端感知&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>正向代理需客户端显式配置（浏览器代理设置）&lt;/li>
&lt;li>反向代理对客户端透明（直接访问代理IP）&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>功能对比&lt;/strong>：&lt;/p>
&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>&lt;/th>
 &lt;th>Nginx反向代理&lt;/th>
 &lt;th>Squid正向代理&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>核心功能&lt;/td>
 &lt;td>负载均衡、SSL终止、缓存加速&lt;/td>
 &lt;td>匿名访问、内容过滤&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>典型场景&lt;/td>
 &lt;td>高并发Web服务、CDN边缘节点&lt;/td>
 &lt;td>企业内网管控、爬虫代理池&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>缓存策略&lt;/td>
 &lt;td>LRU淘汰算法、分片存储&lt;/td>
 &lt;td>对象 freshness 验证机制&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>安全控制&lt;/td>
 &lt;td>IP限流、WAF集成&lt;/td>
 &lt;td>ACL黑白名单、访问时间限制&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;hr>
&lt;h2 id="解决方案">解决方案 &lt;a href="#%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;/h2>&lt;h3 id="nginx反向代理配置示例">Nginx反向代理配置示例 &lt;a href="#nginx%e5%8f%8d%e5%90%91%e4%bb%a3%e7%90%86%e9%85%8d%e7%bd%ae%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>


 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="54ded2f" class="language-nginx ">
 &lt;code>http {
 upstream backend {
 # 加权轮询负载均衡
 server 10.0.0.1 weight=3; 
 server 10.0.0.2;
 
 # 健康检查
 check interval=3000 rise=2 fall=3;
 }

 proxy_cache_path /data/cache levels=1:2 keys_zone=mycache:10m;

 server {
 location / {
 proxy_pass http://backend;
 
 # 缓存配置（1小时有效）
 proxy_cache mycache;
 proxy_cache_valid 200 1h;
 
 # 连接优化
 proxy_buffer_size 16k;
 proxy_busy_buffers_size 64k;
 }
 }
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>优化建议&lt;/strong>：&lt;/p></description></item></channel></rss>