AI 摘要

src 与 href 均用于引入外部资源，但核心区别在于：src 会将资源嵌入当前文档，而 href 仅建立文档与资源之间的关联。文章通过对比 `<script src>` 与 `<link href>` 说明前者会暂停页面解析，后者不会，同时指出“src 必然阻塞页面”并不准确，因为 async/defer 及图片加载已证明该说法存在例外。

src 和 href 都是用来引入外部资源的属性，例如：图片、视频、CSS 文件、JavaScript 文件等。 那么它们两者之间究竟有什么样的区别呢？

<link href="style.css" rel="stylesheet" />
<img src="pic.png" alt="pic" />
<script src="script.js"></script>

href(Hypertext Reference 超文本引用)属性通过指定 Web 资源的位置，来定义当前元素或者当前文档与目标资源之间的链接或关系。当我们引入 CSS 文件时：

<link href="style.css" rel="stylesheet" />

浏览器会明白这是一个样式表资源，这时浏览器对于页面（HTML）的解析不会暂停（渲染可能会暂停，因为浏览器需要使用样式表的样式来绘制页面），这是因为它并不会像@import一样将整个 CSS 文件嵌入到style标签中。

src(Source)属性会将资源嵌入到当前文档中元素所在位置。当我们引入 JavaScript 文件时：

<script src="script.js"></script>

浏览器解析到这句代码时，页面的加载和解析都会暂停，直到浏览器拿到并执行完这个 JavaScript 文件，这就相当于将 JavaScript 文件中的内容全部嵌入到script标签中。

网上有许多文章依次就认定为使用src属性就代表了资源会阻塞页面，我并不认同这个观点。

在 HTML5 出现之后，我们可以通过给script标签添加async或defer属性来使 JavaScript 脚本异步加载。图片的引入也能很好的证明并非使用src属性就代表了该资源会阻塞页面，我们在引入图片时也是使用的src属性，在实际体验中我们可以看到，如果图片加载较慢会产生一种页面加载完成，只有图片所在的部分是空白。

因此我认为，src和href的区别仅在于src会将资源嵌入到当前文档中，而href会建立一个关联指向资源（就像<a href="https://www.baidu.com"></a>并不会将百度嵌入到当前页面中，而<iframe src="https://www.baidu.com"></iframe>就会）。

参考文章

文章地址：https://blog.qiyuor2.me/2021/difference-between-src-href

本作品由柒宇采用CC BY-NC-SA 4.0进行许可，转载请注明出处。