Appearance
src 与 href:资源替换、关联关系与加载语义
主题边界
src表示当前文档需要嵌入或替换使用的资源,href表示当前文档与另一个资源之间的引用关系。- 差异本质在于浏览器是否把目标资源当成当前渲染所需内容。
机制与流程
img、script、iframe、audio、video等元素上的src会触发资源获取,并把结果嵌入当前渲染或执行流程。link[href]常用于样式表、图标、预加载、canonical 等关系声明;a[href]主要提供导航目标。- 不同元素会根据自身语义赋予 URL 不同优先级、缓存策略和错误处理方式。
关键差异
href更偏向关系声明或导航入口,src更偏向当前文档运行所依赖的外部内容。- 即便都触发请求,也不能把它们看成同一类资源标签。
边界条件
- 把 CSS、JS、图片等资源请求都笼统理解成“标签加载文件”,会忽略优先级、阻塞行为和执行语义差异。
- 预加载、预连接等
link关系只提供提示,不等价于资源真正被消费。
工程落点
- 首屏优化时需要精确利用
link rel=preload/preconnect与脚本、图片的实际消费点配合。 - 理解资源声明语义有助于解释为何某些资源会阻塞渲染、某些只是建立连接提示。