link和@import引入css 區別，不建議使用@import

Echoyya、發表於2020-11-13
ImportCSS

眾多周知，有兩種方法可以在頁面中匯入樣式檔案。

  • <link href="a.css" rel="stylesheet">

  • <style> @import url('a.css'); </style>

1. 用法區別

@import是 CSS 提供的語法規則，只有匯入樣式表的作用；link是HTML提供的標籤，不僅可以載入 CSS 檔案，還可以定義 RSS、rel等屬性 。

2. 載入順序區別

載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 會等到頁面全部被下載完再被載入。該規則必須在樣式表頭部最先宣告。並且其後的分號是必需的，如果省略了此分號，外部樣式表將無法正確匯入，並會生成錯誤資訊,而事實證明，避免使用@import 同樣對網站效能有益。

3. 相容性區別

@import是 CSS2.1提出的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在相容性問題。

4. DOM可控性區別

可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式。

5. 載入機制區別

@import @import

// 如果一直使用@import，那麼就沒有什麼效能問題 兩個樣式檔案將同時並行下載
<style>
  @import url('a.css');
  @import url('b.css');
</style>

這個LINK @import的例子使用LINK載入a.css，使用@import匯入b.css:

// 會導致樣式表檔案逐個載入，並行下載資源是加速頁面的一個關鍵,在IE中link混合@import 會破壞並行下載
<link href="a.css" rel="stylesheet" type="text/css">
<style>
  @import url('b.css');
</style>

LINK巢狀@import

a.css 通過LINK插入到頁面中，然後a.css 通過@import規則來引入b.css:

// 這種方式同樣阻止並行載入程式碼，但是這次是對於所有的瀏覽器,其實這個應該不會感到奇怪吧，簡單的想一下就能理解了。瀏覽器必須先下載a.css，並分析它，這個時候，瀏覽器發現了@import 規則，然後才會開始載入b.css.
<link href="a.css" rel="stylesheet" type="text/css">
//在a.css中:
@import url('b.css');

使用LINK匯入a.css 和一個新的樣式檔案proxy.css。proxy.css沒有新增額外的樣式，它只是用來通過@import 規則匯入b.css

// 在下載a.css完成之前，IE不會開始下載b.css。但是在其它所有的瀏覽器中，這種情況不會發生
<link href="a.css" rel="stylesheet" type="text/css">
<link href="proxy.css" rel="stylesheet" type="text/css">
//proxy.css的程式碼:
@import url('b.css');

多個@imports

IE中使用@import會引起資源被按照一個不同於預期的順序下載,在IE中，如果指令碼中包含的程式碼，來自樣式表檔案中應用的樣式(比如getElementsByClassName)， 那麼就將可能會發生意外的結果，因為指令碼先於樣式被載入，儘管開發人員將其置於程式碼的最後面。

// @import在IE中引發資原始檔的下載順序被打亂
<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src="one.js" type="text/javascript"></script>

使用LINK來引入樣式更簡單和安全,使用LINK 可確保樣式在所有瀏覽器裡面都能被並行下載,同樣能保證資源按照開發人員制定的順序下載。

<link href="a.css" rel="stylesheet" type="text/css">
<link href="b.css" rel="stylesheet" type="text/css">

6. 關於權重的區別，一直有爭議

link引入的樣式權重大於@import引入的樣式。

@import只是一個引入外部檔案而已，怎麼會有高於link的權重呢？閱讀了前輩的文章，我覺得說的是正確的，我也就懶得寫demo了，總結一下就是：

參考文獻: 高效能網站設計：不要使用@import 、由link和@import的區別引發的CSS渲染雜談

  1. CSS 中的權重: 指的是選擇器的優先順序。

  2. CSS 的優先順序特性表現為: 對同一 HTML 元素設定樣式時，不同選擇器的優先順序不同，優先順序低的樣式將被高優先順序的樣式層疊掉。

  3. 元素最終的表現樣式：

    • 優先以選擇器權重為參考，CSS 選擇器的權重高，即選擇器的優先順序高；

    • 其次以樣式載入順序為參考，相同權重時，後載入的優先順序越高（最近優先原則）

  4. CSS 權重優先順序順序簡單表示為：!important > 行內樣式 > ID > 類、偽類、屬性 > 標籤名 > 繼承 > 萬用字元

為了便於理解權重的計算方式，我們按以下方式進行數值假設分析：

選擇器 權重
萬用字元 0
標籤 1
類/偽類/屬性 10
ID 100
行內樣式 1000
!important ∞（無窮大）

Ps.首先感謝各種看官的閱讀。筆者屬於學習階段，學識尚淺，雖然本文結論及百家之長，但不排除筆者大腦短路、措辭有誤的可能，有緣閱讀到此處的都是真愛，希望諸位大拿、大牛、大仙、大聖、大神們不吝賜教，及時指正，避免誘導萌新誤入歧途，再次向你們表達筆者的謝意！

相關文章