CSS中link和@import的区别是？
🌙
手机阅读
本文目录结构
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
老祖宗的差别
link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
加载顺序的差别
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
兼容性的差别
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
使用dom控制样式时的差别
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
从上面的分析来看，还是使用link标签比较好。
下面是完善的解析
- (1) link属于HTML标签，而@import是CSS提供的;
- (2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
- (3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
- (4) link方式的样式的权重 高于@import的权重.
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
