@import與<link> 的區別

引入CSS檔案可以使用兩種方式：

（1）.@import。

（2）.<link>標籤。

自然兩者是有區別的，有簡單的表象區別，也有更深層次的區別。

兩種引入CSS檔案方式的主要區別如下：

（1）.@import是CSS中的語法，而<link>是HTML標籤。

（2）.通過JavaScript可以動態建立或者刪除<link>標籤，進而操作CSS。

（3）.無法使用JavaScript動態設定@import引入CSS檔案。

（4）.<link>非同步載入CSS檔案，而@import則需要文件結構載入完畢，且所在CSS檔案載入完畢再去載入。

一.載入時機介紹：

前幾個區別非常簡單，無需多介紹，下面著重介紹一下兩種方式引入CSS檔案的載入時機。

<link>標籤引入CSS檔案是非同步方式的，也就是說它不會阻塞其他檔案的載入，那麼效率自然會很高。

下面通過谷歌開發者工具進行分析，截圖如下：

test.css檔案與StyleSheet.css檔案都是通過<link>標籤載入。

可以看到兩個檔案是並行載入，並不會相互阻塞，這有利於儘可能快的載入完畢CSS檔案。

時間對於使用者體驗有著決定性的作用，所以通過<link>標籤載入CSS檔案沒毛病。

再來看通過@import載入CSS檔案，截圖如下：

test.css檔案開頭通過@import引入style.css檔案，分析如下：

（1）.首先會下載test.css檔案，此時並不會下載style.css檔案。

（2）.test.css檔案下載完畢之後，開始進行解析，發現style.css檔案的url。

（3）.當DOM載入完畢之後，開始載入style.css檔案。

（4）.@import引入檔案會發起一個新的http(s)請求，耗費時間。

（5）.所以，通過@import載入CSS檔案並不是最佳選擇，延遲了頁面渲染的時間。

二.誰優先順序高：

大家知道如果選擇器的優先順序相同，那麼後面的樣式會覆蓋掉前面的樣式。

看如下簡單程式碼例項：

[CSS] 純文字檢視 複製程式碼
div{color:red}
div{color:blue}

很明顯，div中的字型顏色會顯示為藍色，後面的覆蓋掉前面。

下面假定如下幾個情況：

（1）.test.css檔案程式碼如下：

[CSS] 純文字檢視 複製程式碼
@charset "utf-8";
@import url("style.css");
div{color:red}

然後通過<link>標籤載入test.css檔案。

（2）.style.css檔案程式碼如下：

[CSS] 純文字檢視 複製程式碼
div{color:blue}

那麼現在問題來了，div的字型顏色顯示紅色還是藍色，兩種意見，理由分別如下：

（1）.style.css檔案在test.css檔案的頂端引入，紅色在後。

（2）.test.css檔案首先載入完畢，最後再載入style.css檔案，藍色在後。

上面兩種分析看起來都很有道理，CSS程式碼執行的結果是字型呈現紅色，但是給出的第一條理由並不是那麼全面，更為合理的解釋是，瀏覽器只會在css全部載入完畢後，才會應用到DOM樹，最後瀏覽器將其渲染出來（此原則是很有道理的，如果載入一部分渲染一部分，那麼很可能出現一開始文字呈呈現一種，過一會又呈現另一種顏色，體驗極差），此時優先順序關係以檔案中程式碼的實際順序為準，於是最終字型顏色會呈現為紅色，上述結論是沒有任何問題，感興趣的朋友可以自行進行一下測試。