淺談src與href的區別

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>就會）。

參考文章

• Difference between SRC and HREF