link和@import的区别

区别

1. 从属关系
link是HTML方式(属于html标签)， @import是CSS方式(是css提供的)

2. 加载顺序
加载页面时，link标签引入的 CSS 被同时加载(并行)；@import引入的 CSS 将在页面加载完毕后被加载(@import必须在样式规则之前，通过它可以在css文件中引用其他文件)

link最大限度支持并行下载; @import过多嵌套导致串行下载，可能出现FOUC

3. DOM可控性
可以通过 JS 操作 DOM ，利用link的rel=”XX”属性实现界面动态换肤。由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

4.兼容性
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样

5.优先级（权重）
同样的样式，优先级 ：link > @import
注：权重越大优先级越高。

import的好处：在样式表文件可以使用import导入其它的样式表文件，而link不可以

但总体来说：link优于@import
在样式表文件可以使用import导入其它的样式表文件，而link不可以

---

补充：

1、什么是FOUC ? 如何避免
Flash Of Unstyled Content(无样式内容闪烁)：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head

2、@import的书写方式

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别

其中，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

eg:

<style type="text/css">  
@import url(index.css);  
</style>

3、link还有其他的一些用途，比如引入图标

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

4、权重表

选择器	权重
通配符	0
标签	1
类/伪类/属性	10
ID	100
行内样式	1000
！important	1/0(无穷大)