link和@import引入css 区别，不建议使用@import

huofo

发布于 2022-03-16 21:43:23

3.5K00

代码可运行

文章被收录于专栏：huofo's bloghuofo's blog

运行总次数：0

代码可运行

众多周知，有两种方法可以在页面中导入样式文件。

<link href="a.css" rel="stylesheet">
<style> @import url('a.css'); </style>

1. 用法区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel等属性。

2. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 会等到页面全部被下载完再被加载。该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息,而事实证明，避免使用@import 同样对网站性能有益。

3. 兼容性区别

@import是 CSS2.1提出的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4. DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5. 加载机制区别

@import @import

// 如果一直使用@import，那么就没有什么性能问题 两个样式文件将同时并行下载
<style>
  @import url('a.css');
  @import url('b.css');
</style>

LINK @import

这个LINK @import的例子使用LINK加载a.css，使用@import导入b.css:

// 会导致样式表文件逐个加载，并行下载资源是加速页面的一个关键,在IE中link混合@import 会破坏并行下载
<link href="a.css" rel="stylesheet" type="text/css">
<style>
  @import url('b.css');
</style>

LINK嵌套@import

a.css 通过LINK插入到页面中，然后a.css 通过@import规则来引入b.css:

// 这种方式同样阻止并行加载代码，但是这次是对于所有的浏览器,其实这个应该不会感到奇怪吧，简单的想一下就能理解了。浏览器必须先下载a.css，并分析它，这个时候，浏览器发现了@import 规则，然后才会开始加载b.css.
<link href="a.css" rel="stylesheet" type="text/css">
//在a.css中:
@import url('b.css');

LINK 阻断 @import

使用LINK导入a.css 和一个新的样式文件proxy.css。proxy.css没有添加额外的样式，它只是用来通过@import 规则导入b.css

// 在下载a.css完成之前，IE不会开始下载b.css。但是在其它所有的浏览器中，这种情况不会发生
<link href="a.css" rel="stylesheet" type="text/css">
<link href="proxy.css" rel="stylesheet" type="text/css">
//proxy.css的代码:
@import url('b.css');

多个@imports

IE中使用@import会引起资源被按照一个不同于预期的顺序下载,在IE中，如果脚本中包含的代码，来自样式表文件中应用的样式(比如getElementsByClassName)，那么就将可能会发生意外的结果，因为脚本先于样式被加载，尽管开发人员将其置于代码的最后面。

// @import在IE中引发资源文件的下载顺序被打乱
<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src="one.js" type="text/javascript"></script>

LINK LINK

使用LINK来引入样式更简单和安全,使用LINK 可确保样式在所有浏览器里面都能被并行下载,同样能保证资源按照开发人员制定的顺序下载。

<link href="a.css" rel="stylesheet" type="text/css">
<link href="b.css" rel="stylesheet" type="text/css">

6. 关于权重的区别，一直有争议

link引入的样式权重大于@import引入的样式。

@import只是一个引入外部文件而已，怎么会有高于link的权重呢？阅读了前辈的文章，我觉得说的是正确的，我也就懒得写demo了，总结一下就是：

参考文献: 高性能网站设计：不要使用@import 、由link和@import的区别引发的CSS渲染杂谈

CSS 中的权重: 指的是选择器的优先级。
CSS 的优先级特性表现为: 对同一 HTML 元素设置样式时，不同选择器的优先级不同，优先级低的样式将被高优先级的样式层叠掉。
元素最终的表现样式：
- 优先以选择器权重为参考，CSS 选择器的权重高，即选择器的优先级高；
- 其次以样式加载顺序为参考，相同权重时，后加载的优先级越高（最近优先原则）
CSS 权重优先级顺序简单表示为：!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

为了便于理解权重的计算方式，我们按以下方式进行数值假设分析：