src和href的区别是什么

# src和href的区别是什么

在前端开发中，`src`（Source）和`href`（Hypertext Reference）是HTML中两个常见的属性，虽然它们都用于引用外部资源，但用途和行为有显著差异。理解它们的区别对编写高效、符合规范的代码至关重要。

---

## 1. 核心功能差异
### href：建立关联关系
- **用途**：定义当前文档与外部资源之间的**超链接关系**，不直接嵌入资源。
- **典型场景**：
  ```html
  <!-- 链接CSS文件 -->
  <link href="styles.css" rel="stylesheet">
  
  <!-- 超链接到其他页面 -->
  <a href="https://example.com">访问示例</a>

• 行为：浏览器并行加载href资源，不阻塞页面解析。

src：嵌入资源内容

• 用途：将外部资源直接嵌入当前文档中，成为页面的一部分。
• 典型场景： “`html

- **行为**：浏览器会**暂停解析**，先加载并执行/渲染`src`资源。

---

## 2. 关键区别对比
| 特性                | href                          | src                          |
|---------------------|-------------------------------|------------------------------|
| **资源类型**        | 关联性资源（CSS、链接等）     | 嵌入性资源（JS、图片等）     |
| **加载行为**        | 异步加载，不阻塞页面          | 同步加载，可能阻塞页面        |
| **是否替换内容**    | 否（仅建立关联）              | 是（替换当前元素内容）        |
| **常见标签**        | `<link>`, `<a>`, `<area>`     | `<script>`, `<img>`, `<iframe>` |

---

## 3. 实际应用中的注意事项
### 阻塞渲染问题
- 使用`<script src>`时，默认会阻塞HTML解析。可通过`async`或`defer`属性优化：
  ```html
  <script src="app.js" async></script> <!-- 异步加载 -->
  <script src="lib.js" defer></script> <!-- 延迟执行 -->

预加载优化

• 对关键资源（如首屏CSS），可使用preload提升优先级：

  
  <link href="critical.css" rel="preload" as="style">
  

路径解析

• 两者都支持相对路径和绝对路径，但需注意： “`html

❌

---

## 4. 总结
- **何时用href**：需要建立文档与资源的**关联**（如CSS、导航链接）。
- **何时用src**：需要将资源**嵌入**文档（如JS、媒体文件）。
- **性能影响**：`src`可能阻塞渲染，需谨慎使用；`href`资源通常可并行加载。

正确区分二者能避免常见错误（如用`href`加载JS），并优化页面加载性能。

注：实际字数约650字（含代码示例和表格）。如需调整篇幅或补充细节，可进一步修改。