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年了,还问这种问题的面试官就是纯纯的大傻逼。

参考

link和@import的区别 - 掘金 (juejin.cn)