引用外部CSS的link和import方式的分析與比較

標籤：style   blog   class   code   c   java   

很多網頁中的 CSS 連結與引用是這樣寫的：

<style type="text/css" media="screen">@import url("http://www.abaonet.com/abc.css");</style> 

而很多網站使用的都是 link

<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" media="all" />

 

而像 google 百度 163等網站它們都是直接寫在網頁中。

當然使用連結 link 和匯入 import 的好處就是易於維護，但當網速比較慢的時候，會出現載入中斷的情況，從而導致頁面排版出錯。

他倆的作用相同，唯一的不同是服務物件不一樣：

@import 為 CSS 服務

link 是為當前的頁服務

外部參考 CSS 中 link 與 @import 的區別：

本質上，這兩種方式都是為了載入 CSS 檔案，但還是存在著細微的差別。

差別1：老祖宗的差別。link 屬於 XHTML 標籤，而 @import 完全是 CSS 提供的一種方式。

link 標籤除了可以載入 CSS 外，還可以做很多其它的事情，比如定義 RSS，定義 rel 串連屬性等，@import 就只能載入 CSS 了。

差別2：載入順序的差別。當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link 引用的 CSS 會同時被載入，而 @import 引用的 CSS 會等到頁面全部被下載完

再被載入。

所以有時候瀏覽 @import 載入 CSS 的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯

（夢之都載入 CSS 的方式就是使用 @import，我一邊下載一邊瀏覽夢之都網頁時，就會出現上述問題）。

差別3：相容性的差別。由於 @import 是 CSS2.1 提出的，所以老的瀏覽器不支援，@import 只有在 IE5 以上的才能識別，而 link 標籤無此問題。

差別4：使用 dom 控制樣式時的差別。當使用 javascript 控制 dom 去改變樣式的時候，只能使用 link 標籤，因為 @import 不是 dom 可以控制的。

大致就分這幾種差別了（如果還有，大家告訴我再補充上去），其他的都一樣，從上面的分析來看，還是使用 link 標籤比較好。