Appearance
src 与 href：资源替换、关联关系与加载语义
主题定位
这两个属性都能指向 URL，但对浏览器来说，它们表达的资源关系完全不同。
- 这两个属性都能指向 URL，但对浏览器来说，它们表达的资源关系完全不同
- src 表示当前文档需要嵌入或替换使用的资源，href 表示当前文档与另一个资源之间的引用关系
- 差异本质在于浏览器是否把目标资源当成当前渲染所需内容
- 把 CSS、JS、图片等资源请求都笼统理解成“标签加载文件”，会忽略优先级、阻塞行为和执行语义差异
src 与 href 的角色拆分
src
src 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 src 的差异最终会体现在 语义结构、资源加载、可访问性 这几个维度。 src 讲清适用边界、失效条件和代价结构，结论才有技术含量。
href
href 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 href 的差异最终会体现在 语义结构、资源加载、可访问性 这几个维度。 href 讲清适用边界、失效条件和代价结构，结论才有技术含量。
差异对照与使用场景
- 这两个属性都能指向 URL，但对浏览器来说，它们表达的资源关系完全不同
- src 表示当前文档需要嵌入或替换使用的资源，href 表示当前文档与另一个资源之间的引用关系
- 差异本质在于浏览器是否把目标资源当成当前渲染所需内容
- 把 CSS、JS、图片等资源请求都笼统理解成“标签加载文件”，会忽略优先级、阻塞行为和执行语义差异
- img、script、iframe、audio、video 等元素上的 src 会触发资源获取，并把结果嵌入当前渲染或执行流程
- link[href] 常用于样式表、图标、预加载、canonical 等关系声明；a[href] 主要提供导航目标
工程使用建议
- 这两个属性都能指向 URL，但对浏览器来说，它们表达的资源关系完全不同
- src 表示当前文档需要嵌入或替换使用的资源，href 表示当前文档与另一个资源之间的引用关系
- 差异本质在于浏览器是否把目标资源当成当前渲染所需内容
- 把 CSS、JS、图片等资源请求都笼统理解成“标签加载文件”，会忽略优先级、阻塞行为和执行语义差异
- img、script、iframe、audio、video 等元素上的 src 会触发资源获取，并把结果嵌入当前渲染或执行流程
问答设计及延伸
标准回答
回答 src 与 href：资源替换、关联关系与加载语义 时，先定义 src、href 各自解决的问题，再比较它们在 语义结构、资源加载、可访问性 上的差异，最后给出选型边界和工程代价。
追问拆解
- src 与 href：资源替换、关联关系与加载语义 与“脚本加载：parser-blocking、defer、async 与模块脚本”的边界关系
- src 与 href：资源替换、关联关系与加载语义 与“浏览器缓存：强缓存、协商缓存与缓存分层”的边界关系
- 跨标签页、跨域、多端协作场景下的结论变化
- 维护成本上升后的优先级调整
容易失分的点
- 只给“哪个好”的结论，不先拆对象
- 只报 API 或术语，不解释运行时行为和代价
- 缺少真实场景，导致结论过度绝对
项目映射
- 结合真实系统说明 src 到 href 分别落在哪段链路
- 补充未选方案的放弃原因和约束差异
- 补充线上问题、治理动作和验证结果