加载css的link和@import的区别

网页加载css文件有两种方式：

• <link rel="stylesheet" href="a.css" />
• <style>@import url("b.css");</style>
  

对比：

• link属于XHTML标签，而@import是CSS中提供的; 
• link标签除了可以加载CSS外，还可以做很多其它的事情，@import就只能加载CSS了。
• import是css2.1以后才有的，所以只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
• 页面被加载的时，link引用的内容会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
• 关于优先级：
  1. 设置样式的方式：行内样式、内联样式、外联样式、导入样式
  2. 当@import与内联样式<style></style>一起时，内联样式>导入样式
  3. 除了上述情况，其它时候以样式加载顺序为参考，后加载的优先级越高。
     

• 使用import时需要注意的地方：该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
• link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
  
• @import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

  //main.css
     @import “sub1.css”;
     @import “sub2.css”;
     a,p {color:red;}    
     .one{color:blue}

综上所述，引入css样式，还是尽量使用<link>标签！但是过多的引入文件又会造成http请求次数过多，对网站加载速度不利，因此有些情况下将一些css或者js的脚本直接写在html页面中，也是很好的选择（比如新浪网），当然，使用webpack或者gulp进行脚本压缩合并，多个脚本合为一个，减少http请求次数，也利于网站的优化。