资源加载 on ZiYang FrontEnd Interviewhttps://fe-interview.pangcy.cn/tags/%E8%B5%84%E6%BA%90%E5%8A%A0%E8%BD%BD/Recent content in 资源加载 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800src与href属性差异对比https://fe-interview.pangcy.cn/docs/html/html-03/Tue, 04 Mar 2025 06:58:29 +0000https://fe-interview.pangcy.cn/docs/html/html-03/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考察以下核心能力维度：</p> <ol> <li><strong>HTML规范理解</strong>：对标准属性的语义化掌握程度</li> <li><strong>浏览器工作原理</strong>：资源加载机制与渲染管线的关联</li> <li><strong>应用场景判断</strong>：不同属性在工程实践中的合理运用</li> </ol> <p>具体技术评估点包括：</p> <ul> <li>资源加载的阻塞行为差异</li> <li>属性与HTML元素的从属关系</li> <li>浏览器对两类资源的预处理差异</li> <li>缓存策略与预加载机制</li> <li>跨域处理方式的区别</li> </ul> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li><strong>语义区别</strong>：<code>src</code>（source）表示内容替换，<code>href</code>（hypertext reference）表示资源关联</li> <li><strong>加载机制</strong>：<code>src</code>资源会作为文档组成部分加载，<code>href</code>资源作为附加依赖加载</li> <li><strong>执行影响</strong>：带<code>src</code>的脚本会阻塞DOM构建，<code>href</code>样式表仅阻塞渲染</li> </ol> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>当浏览器解析到<code>&lt;script src&gt;</code>时：</p> <ol> <li>暂停HTML解析</li> <li>下载并立即执行脚本</li> <li>恢复文档解析</li> </ol> <p>而<code>&lt;link href&gt;</code>的处理：</p> <ol> <li>异步下载CSS文件</li> <li>不阻塞HTML解析</li> <li>但会阻塞渲染树的合成</li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>误认为所有<code>href</code>都是非阻塞资源</li> <li>混淆<code>&lt;img&gt;</code>的<code>src</code>与背景图加载优先级</li> <li>忽略<code>preload</code>等属性对加载策略的影响</li> </ul> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p><code>src</code>与<code>href</code>的核心差异体现在：</p> <ol> <li> <p><strong>资源类型</strong><br> <code>src</code>用于<strong>替换型内容</strong>（如<code>&lt;script&gt;</code>/<code>&lt;img&gt;</code>），浏览器会下载并替换元素内容；<code>href</code>用于<strong>关联型资源</strong>（如<code>&lt;a&gt;</code>/<code>&lt;link&gt;</code>），建立文档与外部资源的引用关系。</p> </li> <li> <p><strong>加载机制</strong><br> <code>src</code>资源会阻塞文档解析（如未加<code>async</code>的<code>&lt;script&gt;</code>），<code>href</code>资源异步加载但可能阻塞渲染（如CSS文件）。<code>&lt;img&gt;</code>的<code>src</code>触发即时加载，而<code>&lt;link rel=&quot;stylesheet&quot;&gt;</code>的<code>href</code>可能被延迟加载。</p> </li> <li> <p><strong>典型场景</strong></p> </li> </ol> <ul> <li><code>src</code>：<code>&lt;script src=&quot;app.js&quot;&gt;</code>（执行JS）、<code>&lt;img src=&quot;logo.png&quot;&gt;</code>（嵌入图片）</li> <li><code>href</code>：<code>&lt;a href=&quot;/about&quot;&gt;</code>（页面导航）、<code>&lt;link href=&quot;style.css&quot;&gt;</code>（引用样式表）</li> </ul> <h2 id="解决方案">解决方案 <a href="#%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="编码示例">编码示例 <a href="#%e7%bc%96%e7%a0%81%e7%a4%ba%e4%be%8b" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3> <div class="prism-codeblock "> <pre id="d15ba75" class="language-html "> <code>&lt;!-- 正确使用src的场景 --&gt; &lt;script src=&#34;lazy-load.js&#34; defer&gt;&lt;/script&gt; &lt;img src=&#34;placeholder.jpg&#34; loading=&#34;lazy&#34; alt=&#34;...&#34;&gt; &lt;!-- 合理使用href的示例 --&gt; &lt;link href=&#34;print.css&#34; rel=&#34;stylesheet&#34; media=&#34;print&#34;&gt; &lt;a href=&#34;/pr-pdf&#34; download=&#34;whitepaper.pdf&#34;&gt;下载白皮书&lt;/a&gt;</code> </pre> </div> <h3 id="性能优化">性能优化 <a href="#%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li><strong>预加载关键资源</strong>：<code>&lt;link rel=&quot;preload&quot; href=&quot;critical.css&quot; as=&quot;style&quot;&gt;</code></li> <li><strong>延迟非关键脚本</strong>：使用<code>async</code>/<code>defer</code>属性优化<code>src</code>加载</li> <li><strong>响应式图片</strong>：结合<code>srcset</code>属性适配不同分辨率</li> </ol> <h2 id="深度追问">深度追问 <a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="如何避免图片src导致的布局偏移">如何避免图片src导致的布局偏移？ <a href="#%e5%a6%82%e4%bd%95%e9%81%bf%e5%85%8d%e5%9b%be%e7%89%87src%e5%af%bc%e8%87%b4%e7%9a%84%e5%b8%83%e5%b1%80%e5%81%8f%e7%a7%bb" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>使用<code>width</code>/<code>height</code>预设占位空间，配合<code>aspect-ratio</code>CSS属性</li> </ul> <h3 id="不同资源类型对preconnect的影响">不同资源类型对preconnect的影响？ <a href="#%e4%b8%8d%e5%90%8c%e8%b5%84%e6%ba%90%e7%b1%bb%e5%9e%8b%e5%af%b9preconnect%e7%9a%84%e5%bd%b1%e5%93%8d" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>字体资源需提前建立DNS连接，CSS需预加载但无需preconnect</li> </ul>