href 和 src 有什么区别，它们对性能有什么影响？

作者：watermelo37

CSDN全栈领域优质创作者、华为云云享专家、阿里云专家博主、腾讯云“创作之星”特邀作者、火山KOL、支付宝合作作者，全平台博客昵称watermelo37。

一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

href 和 src 有什么区别，它们对性能有什么影响？ 在前端开发中，src 和 href 是最常使用的两个 HTML 属性，许多工程师主要依靠经验使用，而不真正清楚它们在浏览器中的语义、行为差异以及性能与安全影响。难道它们只是“约定俗成”的

小瓜将从语义基础 → 浏览器行为 → 工程实践，由浅入深分享分享 href 与 src 的小秘密。

一、核心语义：src 与 href 的本质区别1、基本语义（根本差异） src = 引入资源 → 当前元素必须使用该资源。元素会“把资源装进来”并执行/渲染/播放。常见对象：img、script、iframe、video、audio。

href = 建立关系或导航 → 当前元素指向另一个资源。并不一定“加载并执行资源”，而是声明一种关系或跳转。常见对象：a、link、area、base。

总结起来就是：src 是“我需要它”；href 是“它在那里”。

2、典型使用场景与对应元素案例 使用 src 的元素（真正依赖资源）：

代码语言：javascript复制

对 href 则会视元素类型而定，比如：

：立即请求，并阻塞渲染。：立即高优先级请求。：不请求，等待用户点击。：延迟、低优先级请求。 总而言之，href 是关系声明，不一定马上发请求；src 则大部分情况下立即下载。