src和href

一、核心定义与作用

• src（Source）：
  用于指定外部资源的源地址，其指向的资源会被浏览器下载并执行/渲染，是页面内容的一部分。例如：

  • 图片标签：<img src="image.jpg">
  • 脚本标签：<script src="script.js">
  • 视频/音频标签：<video src="video.mp4">

• href（Hypertext Reference）：
  用于指定当前元素的超文本引用目标，其指向的资源会被浏览器关联处理，但不一定直接下载。例如：

  • 链接标签：<a href="https://example.com">
  • 样式表标签：<link href="style.css" rel="stylesheet">

二、浏览器行为差异

维度	src	href
资源加载时机	浏览器解析到标签时立即下载资源，会阻塞后续渲染（如script标签默认阻塞）。	视标签类型决定： - 如<link>会异步加载CSS，不阻塞DOM解析； - 如<a>点击时才加载目标页面。
对DOM的影响	资源加载完成后，会将内容嵌入到当前DOM中（如img标签加载后显示图片）。	不直接修改DOM内容，而是建立当前文档与目标资源的关联（如<link>通过CSS影响样式）。
HTTP请求类型	通常为GET请求（获取资源内容）。	根据场景可能为GET（如链接）或其他类型（如表单提交）。

三、典型应用场景对比

1. src 的常见场景：

   • 引入需要执行的脚本（JS文件）：

     <script src="app.js"></script> <!-- 下载并执行JS代码 -->
     

   • 嵌入媒体资源（图片、视频）：

     <img src="logo.png" alt="Logo"> <!-- 下载并渲染图片 -->
     

2. href 的常见场景：

   • 超链接导航：

     <a href="/about">关于我们</a> <!-- 点击后跳转到about页面 -->
     

   • 引入外部样式表：

     <link href="styles.css" rel="stylesheet"> <!-- 异步加载CSS，影响页面样式 -->
     

四、底层原理总结

• src：相当于“嵌入资源”，浏览器会将其作为当前文档的一部分处理，加载资源时会占用带宽并影响渲染流程。
• href：相当于“关联资源”，浏览器通过其建立文档关系（如导航、样式关联），资源加载策略更灵活（异步或按需）。

五、扩展

• 提及script标签的async/defer属性：可控制JS加载是否阻塞渲染，优化性能。
• 对比<link href>与<style>标签：前者异步加载CSS，后者阻塞但无需额外请求。
• 举例说明：若误将src用于<link>标签或href用于<img>标签，会导致资源加载失败或行为异常。