src和href：这对'双胞胎'属性，你用对了吗？

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个写了6年前端代码的老司机。今天要和大家聊聊前端开发中一对看似相似实则大不相同的"双胞胎"------src和href。这就像分不清生抽和老抽的厨房新手，虽然都是"抽"，但用错了地方，整道菜就毁了！

一、初识这对"双胞胎"

记得我刚学前端时，经常把这两个属性搞混：

html 复制代码

<!-- 什么时候用src？ -->
<script src="app.js"></script>
<img src="photo.jpg">

<!-- 什么时候用href？ -->
<link href="style.css" rel="stylesheet">
<a href="about.html">关于我</a>

二、本质区别：加载 vs 关联

src (Source) ：表示"我要加载这个资源，它是页面的一部分"

会下载并执行/显示资源
是页面内容的一部分
加载会阻塞页面解析（除非加上async/defer）

href (Hypertext Reference) ：表示"我要关联这个资源/链接"

只是建立关联关系
不会立即加载（除非是CSS）
不会阻塞页面解析

三、常见使用场景对比

属性	常用标签	行为特点
src	`<script>`, `<img>`	加载并执行/显示资源
	`<iframe>`, `<video>`
href	`<a>`, `<link>`	建立关联关系
	`<area>`, `<base>`

四、那些年我踩过的坑

坑1：在link标签误用src

html 复制代码

<!-- 错误写法（不会加载CSS） -->
<link src="style.css" rel="stylesheet">

<!-- 正确写法 -->
<link href="style.css" rel="stylesheet">

坑2：混淆a标签和img标签

html 复制代码

<!-- 错误写法（图片不会显示） -->
<a src="photo.jpg">查看照片</a>

<!-- 正确写法 -->
<a href="photo.jpg">查看照片</a>
<img src="photo.jpg">

五、特殊场景分析

1. CSS中的url()用哪个？

css 复制代码

/* 这里既不是src也不是href */
background-image: url("bg.jpg");

2. 动态加载资源时

javascript 复制代码

// 创建script标签必须用src
const script = document.createElement('script');
script.src = 'app.js'; // 不是href!
document.head.appendChild(script);

六、性能影响对比

src的影响：

会阻塞渲染（特别是没有async/defer的script）
浏览器会立即加载资源

href的影响：

CSS的href会阻塞渲染（浏览器要等CSSOM构建）
其他href通常不会阻塞

七、记忆小窍门

我总结了一个简单的记忆方法：

"看见显示或执行用src（如图片、脚本），看见链接或关联用href（如锚点、样式表）"

八、实际项目中的最佳实践

脚本加载优化

html 复制代码

<!-- 延迟加载 -->
<script src="app.js" defer></script>

<!-- 异步加载 -->
<script src="analytics.js" async></script>

预加载关键资源

html 复制代码

<!-- 使用href预加载 -->
<link href="font.woff2" rel="preload" as="font">

响应式图片处理

html 复制代码

<!-- srcset和src配合使用 -->
<img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w"
     sizes="(max-width: 600px) 480px, 768px">

九、面试常考问题

面试官常问："为什么script用src而link用href？"

我的回答：

"因为script是直接加载并执行代码，属于页面功能的一部分，所以用src表示source；而link是建立与外部资源的关联关系，所以用href表示reference。这种设计保持了HTML语义化的一致性。"

十、总结

src用于加载资源 ，href用于建立关联
用错属性会导致资源无法加载或关联失效
理解它们的区别有助于写出更规范的HTML代码
性能优化时要特别注意src属性的影响

记住这对"双胞胎"的本质区别，你的前端代码会更加专业！如果大家还有什么有趣的踩坑经历，欢迎在评论区分享~