link 和 @import 的區別是什麼？

link語法結構：

　　<link href="url" rel="stylesheet" type="text/css">

@import語法結構：

@import url 多用於css文件中，把多個樣式表導入到一個樣式表中，在頁面裏面只須要導入一個樣式表便可，便於修改和擴展

1.在html中

　　<style>

　　　　@import url

　　</style>

2.在css中

@import url

 

link 和 @import 的區別:

1.語法結構的不一樣

2.本質不一樣

屬於標籤，只能放入html源碼裏進行使用，而@import能夠看做爲css樣式，能夠引入css樣式（屬於html標籤，而@import是css提供的）

3.頁面加載

頁面加載時，會被同時被加載，而@import引用的css會等到頁面被加載完的時候再加載

4.兼容性。

@import只有在IE5以上才能被識別，而是html標籤，無兼容問題

5.優先級

無論是仍是@import ，優先級按加載順序爲參考，後加載的優先級高

6.可控性

使用js控制dom改變樣式只能使用標籤

 

爲何要避免使用css @import

在web前端優化的建議中，不建議使用css @import 由於這種方式加載css至關於把css放在了底部，所以@import會在網頁加載中增長延遲

至於爲何會增長延遲是由於使用@import引用的文件只有字引用它的那個css文件被下載、解析後，瀏覽器纔會知道還有另外一個css須要下載，這時纔會去進行想在，而後再解析、構建render tree等一系列操做。所以css @import引發的css解析延遲會加長頁面留白期，因此要儘可能避免css @import，採用標籤的方式引入