悉前端的小伙伴都知道網站的性能和網頁代碼有很大的關系，這里指網頁代碼主要是指前端代碼(html、css、js代碼)，而css合理使用很大關系上影響網站頁面各種性能，今天主要給大家分析下css中@import和link使用和區別？

css中的@import和link

在css中@import 導入指定的的外部樣式表及目標媒體，css導入外部文件主要是通過link和@import實現的，它們都各自的語法結構。如果不清楚css基礎知識可翻看之前發的文章。

@import代碼示例如下：

<style type="text/css">

@import url(路徑地址/test.css);

</style>

link的代碼示例如下：

<link href="路徑地址/test.css" rel="stylesheet" type="text/css" />

css中@import和link的區別

1、屬性不同

link是html提供的標簽，不僅可以加載css文件，還能定義 RSS、rel 連接屬性等。而

@import是css中的語法規則

2、加載順序不同

頁面打開時，link引用的css文件被加載。而@import引用的CSS等頁面加載完后最后加載。

3、兼容性

@import是css2.1后提出的，而link是不存在兼容問題。

4、DOM控制性

js操作DOM，可以使用link改變樣式，無法使用@import的方式使用樣式。

使用@import和link的注意事項？

1、css中避免過多使用 @import

如果了解了@import原理，你就會明白它的性能并不高，過多使用它會延長瀏覽器渲染頁面的時間。

2、@import可以在css中引入其他樣式表利于修改和擴展。

代碼示例如下：

index.css

———————-

@import “test1.css”;

@import “test2.css”;

test1.css

———————-

p {color:blue;}

test2.css

———————-

.mystyle {color:red}

好了關于“css中的link和@import引用”先聊到這，大家有什么更好想法歡迎評論。每天學習一個知識點，每天進步一點點。每日寄語”志不立，如無舵這舟，無銜之馬，漂蕩奔逸，終亦何所底乎。”下一期咱們接著聊。

、從屬關系區別

@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。

2、加載順序區別

加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。

3、兼容性區別

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

4、DOM可控性區別

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