link和@import的区别

这个问题都算我们前端开发者的老朋友了，偶尔想起但总是很容易忘记，今天再记录一次，以便记忆
从本质上讲，这两兄弟的作用都是为了加载css文件，但是他们从性能上，从兼容性上，都有细微的差别，这些差别很容易混淆，所以我再列举一遍把

1.本身性质差别

link属于HTML的一个标签，它除了加载css文件之外，还可以定义RSS，定义ref链接等等，@import是css提供的一种方法，他只能用来加载css文件

2.加载顺序的差别

当我们浏览网页时，link引用的css会同步加载，但@import引用的css文件会等到页面全部被下载完再加载，所以如果试用import引入，可能会导致页面一开始没有样式，网速慢得时候很明显

3.兼容性的差别

link完全兼容，但是@import只有ie5以上得才支持（因为css2.1才提出）

4.DOM得可控性

当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
（这句话我看很久没看明白，后来才看懂这句话，意思其实很简单）如果想用js去改变样式的话，你只能采用link引入得css样式，import引入得样式表是不能用js操控dom改变得，因为import无法被dom操控

还有就是权重方面得区别了，这方面争议挺大得，也没个标准，我就没多做研究，有心得朋友们自己发掘⑧。