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 @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 > 类、伪类、属性 > 标签名 > 继承 > 通配符
为了便于理解权重的计算方式,我们按以下方式进行数值假设分析:
选择器 | 权重 |
---|---|
通配符 | 0 |
标签 | 1 |
类/伪类/属性 | 10 |
ID | 100 |
行内样式 | 1000 |
!important | ∞(无穷大) |