link 和 @import 的区别是什么？

link语法结构：

　　<link href="url" rel="stylesheet" type="text/css">

@import语法结构：

@import url 多用于css文件中，把多个样式表导入到一个样式表中，在页面里面只须要导入一个样式表便可，便于修改和扩展

1.在html中

　　<style>

　　　　@import url

　　</style>

2.在css中

@import url

 

link 和 @import 的区别:

1.语法结构的不一样

2.本质不一样

属于标签，只能放入html源码里进行使用，而@import能够看做为css样式，能够引入css样式（属于html标签，而@import是css提供的）

3.页面加载

页面加载时，会被同时被加载，而@import引用的css会等到页面被加载完的时候再加载

4.兼容性。

@import只有在IE5以上才能被识别，而是html标签，无兼容问题

5.优先级

无论是仍是@import ，优先级按加载顺序为参考，后加载的优先级高

6.可控性

使用js控制dom改变样式只能使用标签

 

为何要避免使用css @import

在web前端优化的建议中，不建议使用css @import 由于这种方式加载css至关于把css放在了底部，所以@import会在网页加载中增长延迟

至于为何会增长延迟是由于使用@import引用的文件只有字引用它的那个css文件被下载、解析后，浏览器才会知道还有另外一个css须要下载，这时才会去进行想在，而后再解析、构建render tree等一系列操做。所以css @import引发的css解析延迟会加长页面留白期，因此要尽可能避免css @import，采用标签的方式引入