HTML 的 src 和 href 属性

src（source）和 href（hyper reference）在 HTML 中虽然都用于引用外部资源，但它们的机制、目标和应用场景却截然不同。以下是两者的深层对比：

---

1. 核心功能与作用

属性	作用原理	典型标签	资源加载行为
src	直接替换元素内容 （嵌入资源到当前文档中）	<script>, <img>, <iframe>, <audio>, <video>	立即加载，阻塞文档解析（如未异步）
href	建立关联 （定义资源与文档的逻辑关系）	<a>, <link>, <area>	按需加载（直接跳转或通过 link 预加载）

---

2. 实现机制对比

(1) src 的运行逻辑

<!-- 示例：嵌入脚本 -->
<script src="app.js"></script>

• 工作流：浏览器解析到 src 时，立即停止 HTML 解析，下载并执行资源（除非指定 defer/async）。

• 关键特性：

  • 直接影响文档结构（如 iframe 嵌套文档）

  • 可能导致阻塞（例如未优化的脚本加载）

(2) href 的运行逻辑

<!-- 示例：关联CSS -->
<link href="styles.css" rel="stylesheet">

• 工作流：浏览器建立与资源的关联，异步加载（如CSS文件并行下载，不阻塞HTML解析）。

• 关键特性：

  • 仅声明关系，不替换内容（<a> 标签需用户交互触发跳转）

  • 支持预加载（通过 <link rel="preload"> 指示浏览器预先获取资源）

---

3. 实际场景深度分析

应用场景	src 的用法	href 的用法
资源嵌入	<img src="photo.jpg">（将图片嵌入文档）	不适用
逻辑关联	不适用	<a href="details.html">详情</a>（导航）
功能扩展	<script src="analytics.js">（注入功能）	<link href="icon.ico" rel="icon">（指定页面图标）
动态内容	<iframe src="widget.html">（内嵌子页面）	不适用

---

4. 浏览器处理差异

• 缓存策略：

  • src 资源（如脚本、图片）通常依据 Cache-Control 头部策略缓存。

  • href 资源（如CSS）可能被浏览器预加载器主动发现并提前加载。

• SEO 影响：

  • src 内容可能直接影响页面结构（例如 img 的 alt 属性参与SEO）。

  • href 中的规范链接（rel="canonical"）影响搜索引擎的页面关系判断。

• 错误处理：

  • src 资源加载失败会触发 onerror 事件（例如图片显示破碎图标）。

  • href 资源错误（如404 CSS文件）需要开发者主动监控（可能影响渲染）。

---

5. 潜在陷阱与优化策略

(1) src 的常见问题

<!-- 错误：在 <script> 中混用 src 和内联代码 -->
<script src="lib.js">
  console.log("这行代码不会执行！"); // ⚠️ src存在时内联代码被忽略
</script>

优化方案：

• 非阻塞加载：使用 async 或 defer 属性异步加载脚本。

• Lazy Loading：对图片等资源添加 loading="lazy" 延迟加载。

(2) href 的高级用法

<!-- 预加载关键资源 -->
<link href="critical.css" rel="preload" as="style" οnlοad="this.rel='stylesheet'">

注意事项：

• 链接关系语义化：确保 rel 属性正确（如 stylesheet、nofollow）。

• 性能优化：利用 <link rel="preconnect"> 提前建立DNS连接。

---

总结：关键区别速记表

	src	href
核心行为	加载资源并替换元素内容	建立资源与文档的关联
加载时机	立即加载（可阻塞渲染）	按需加载（预加载可优化初始化速度）
应用目标	功能性嵌入（脚本、媒体等）	关系型关联（样式、导航等）
对DOM的影响	直接修改文档结构	仅声明关系，不影响DOM内容

正确选择原则： 用 src：需要将外部资源转换为主体的一部分（如图片、脚本等） 用 href：需要定义文档与其他资源的逻辑联系（如链接、样式表等）