前端 link和@import的区别

 

 

1. 引入的不同：

 link(外部引用): <link rel="stylesheet" type="text/css" href="xxx" />

 @import(导入式): @import url(xxx);

2. link 一般放在 head 标签中，而 @import 必须放在 <style  type="text/css"> 标签中（vue中除外）。

3. link 可以通过JS操作DOM，来改变样式，而 @import 不可以。 

4. link标签作为HTML元素，不存在兼容性问题，而@import是CSS2之后才有的语法，故只能在 IE6 以上才能识别

5. link 的权重优先级高于 @import。

6. link 会和 dom 结构一同加载渲染，而 @import 只能等 dom 结构加载完成以后才能加载渲染页面。（重点）