10分钟了解link与import的区别
2024-11-19 01:11:41
朋友：最近听说你在整理面试题？那我考考你，css样式的引入，link和import有什么区别？
我：你他妈疯了？这哪怕是五年前也是很少有人问到的，现在都是直接打包压进去的，你问我这个？
朋友：这关系到你的基础牢不牢靠，万一面试官问了呢。
我：你他妈就是一个大傻逼。
正文
尽管这道面试题是五年前的老古董了，这个问题放在五年前都是冷门问题。
在当初已经盛行前端工程化的时代了，这种问题实在是没有必要放在嘴边，样式都拆到项目里边了，谁管你最后是怎么引入的呢。
但是，问都问了，索性看看整理一下吧。
区别
二者毫无问都是引入CSS样式，我们没必要找什么共性，直接看看区别吧。
从属关系
- link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
- @import是 CSS 提供的语法规则，只有导入样式表的作用；
加载顺序
- link标签引入的 CSS 被同时加载；
- @import引入的 CSS 将在页面加载完毕后被加载。
兼容性区别
- link标签作为 HTML 元素，不存在兼容性问题。
- @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；
DOM可控性区别
- 可以通过 JS 操作 DOM ，插入link标签来改变样式；
- 由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
权重区别
link引入的样式权重大于@import引入的样式。（相同的类名或者标签名，而不是含有!important之类的才生效）
Tips
尽管现在我们不怎么需要关注了，但有时候项目工程化打包会遇到二者优先度或其他问题，这里备注下。
@import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。
而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的
结语
2024年了，还问这种问题的面试官就是纯纯的大傻逼。