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

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

  • <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加载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导入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 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渲染杂谈

  1. CSS 中的权重: 指的是选择器的优先级。

  2. CSS 的优先级特性表现为: 对同一 HTML 元素设置样式时,不同选择器的优先级不同,优先级低的样式将被高优先级的样式层叠掉。

  3. 元素最终的表现样式:

    • 优先以选择器权重为参考,CSS 选择器的权重高,即选择器的优先级高;

    • 其次以样式加载顺序为参考,相同权重时,后加载的优先级越高(最近优先原则)

  4. CSS 权重优先级顺序简单表示为:!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

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

选择器 权重
通配符 0
标签 1
类/伪类/属性 10
ID 100
行内样式 1000
!important ∞(无穷大)

Ps.首先感谢各种看官的阅读。笔者属于学习阶段,学识尚浅,虽然本文结论及百家之长,但不排除笔者大脑短路、措辞有误的可能,有缘阅读到此处的都是真爱,希望诸位大拿、大牛、大仙、大圣、大神们不吝赐教,及时指正,避免诱导萌新误入歧途,再次向你们表达笔者的谢意!

posted @ 2020-11-13 14:34  Echoyya、  阅读(2517)  评论(1编辑  收藏  举报