您的位置:首页> 实例代码> CSS实例

@import与<link> 的区别

2019-1-15 09:30| 作者: admin| 查看: 889| 评论: 0|来自: 蚂蚁部落

引入CSS文件可以使用两种方式:

(1).@import。

(2).<link>标签。

自然两者是有区别的,有简单的表象区别,也有更深层次的区别。

两种引入CSS文件方式的主要区别如下:

(1).@import是CSS中的语法,而<link>是HTML标签。

(2).通过JavaScript可以动态创建或者删除<link>标签,进而操作CSS。

(3).无法使用JavaScript动态设置@import引入CSS文件。

(4).<link>异步加载CSS文件,而@import则需要文档结构加载完毕,且所在CSS文件加载完毕再去加载。

一.加载时机介绍:

前几个区别非常简单,无需多介绍,下面着重介绍一下两种方式引入CSS文件的加载时机。

<link>标签引入CSS文件是异步方式的,也就是说它不会阻塞其他文件的加载,那么效率自然会很高。

下面通过谷歌开发者工具进行分析,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/093056awah995lbu5kr6h2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

test.css文件与StyleSheet.css文件都是通过<link>标签加载。

可以看到两个文件是并行加载,并不会相互阻塞,这有利于尽可能快的加载完毕CSS文件。

时间对于用户体验有着决定性的作用,所以通过<link>标签加载CSS文件没毛病。

再来看通过@import加载CSS文件,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/093114wptn16tvpfszpj1n.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

test.css文件开头通过@import引入style.css文件,分析如下:

(1).首先会下载test.css文件,此时并不会下载style.css文件。

(2).test.css文件下载完毕之后,开始进行解析,发现style.css文件的url。

(3).当DOM加载完毕之后,开始加载style.css文件。

(4).@import引入文件会发起一个新的http(s)请求,耗费时间。

(5).所以,通过@import加载CSS文件并不是最佳选择,延迟了页面渲染的时间。

二.谁优先级高:

大家知道如果选择器的优先级相同,那么后面的样式会覆盖掉前面的样式。

看如下简单代码实例:

[CSS] 纯文本查看 复制代码
div{color:red}
div{color:blue}

很明显,div中的字体颜色会显示为蓝色,后面的覆盖掉前面。

下面假定如下几个情况:

(1).test.css文件代码如下:

[CSS] 纯文本查看 复制代码
@charset "utf-8";
@import url("style.css");
div{color:red}

然后通过<link>标签加载test.css文件。

(2).style.css文件代码如下:

[CSS] 纯文本查看 复制代码
div{color:blue}

那么现在问题来了,div的字体颜色显示红色还是蓝色,两种意见,理由分别如下:

(1).style.css文件在test.css文件的顶端引入,红色在后。

(2).test.css文件首先加载完毕,最后再加载style.css文件,蓝色在后。

上面两种分析看起来都很有道理,CSS代码执行的结果是字体呈现红色,但是给出的第一条理由并不是那么全面,更为合理的解释是,浏览器只会在css全部加载完毕后,才会应用到DOM树,最后浏览器将其渲染出来(此原则是很有道理的,如果加载一部分渲染一部分,那么很可能出现一开始文本呈呈现一种,过一会又呈现另一种颜色,体验极差),此时优先级关系以文件中代码的实际顺序为准,于是最终字体颜色会呈现为红色,上述结论是没有任何问题,感兴趣的朋友可以自行进行一下测试。


鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部