link和@import的区别

原链接：https://www.jianshu.com/p/b6e9d9ab70c0

一：建议使用link，慎用@import
二：区别

1. 从属关系
   1.1 link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性
   1.2 @import：@import是css提供的语法，只有导入样式表的作用

2. 加载顺序
   2.1  link：link在页面加载时CSS同时被加载
   2.2 @import：引入的CSS要等页面加载完毕后再加载

3. 兼容性问题
   3.1 link是HTML提供的语法，不存在兼容性问题
   3.2 @import是css2.1提供的语法，ie5以上才兼容

4. DOM可控性
   js控制DOM时，可以通过插入link标签来改变样式，不能通过@import改变

5. 权重问题（有争议）
   link标签引入的样式权重大于@import标签