10分钟了解link与import的区别
2024-12-09 11:13:16
朋友:最近听说你在整理面试题?那我考考你,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年了,还问这种问题的面试官就是纯纯的大傻逼。