@import和link引入样式的区别

1. 兼容性
   1. @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；
   2. link标签作为 HTML 元素，不存在兼容性问题。
2. 加载页面顺序
   1. @import引入的 CSS 将在页面加载完毕后被加载。
   2. link标签引入的 CSS 被同时加载；
3. 从属关系(功能)
   1. @import是 CSS 提供的语法规则，只有导入样式表的作用；
   2. link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
4. DOM可控性
   1. 由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
   2. 可以通过 JS 操作 DOM ，插入link标签来改变样式；
5. 权重区别
   1. link引入的样式权重大于@import引入的样式。

总体来说：link优于@import

总结

1. link是HTML方式， @import是CSS方式
2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
3. link可以通过rel="alternate stylesheet"指定候选样式
4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
5. @import必须在样式规则之前，可以在css文件中引用其他文件
6. 总体来说：link优于@import