CSS引用(link)和导入(@import)的区别(2009年4月13日更新)

日期：2013-11-30  来源：攀枝花惠康网络公司

巨匠知道页面要使用外部css文件的体例有两种，一种是引用(link)，例如：<link rel=’stylesheet’ href=http://www.css88.com/archives/’a.css’>；另一种是导入(@import)，例如：<style>@import url(‘a.css’);</style>；两者引用的体例在页面上的揭示效不美观却是一样的，可是两者又有着很重年夜的区别：就是页面的机能问题！
当然如不美观站点的流量没达到必然的流量（好比说10万ip或者更年夜），我感受用link 或者 @import或者都是无所谓的，只要你维护便利。

假设我们一张页面使用了两个样式文件:a.css和b.css;

第一种体例，两个都导入：

我们可以用使用工具剖析一下网页的加载情形，如图：

即两个css同时加载；

<link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>
<style>
@import url('b.css');
</style>

再来看看截图：

也就是等a.css下载完成了后再下载b.css,页面机能较着下降；

第三种体例，引用a.css，在a.css导入b.css：

机能就酿成了这样的：

==========以下2009年4月13日更新========

</link><link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>

在b.css中导入a.css

我们看截图：机能仍是欠好！

第四种体例，引用a.css和b.css(b.css只是导入c.css)，b.css导入c.css：

</link><link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>
</link><link rel='stylesheet' type='text/css' href='b.css'>

在b.css中导入c.css

@import url('b.css');

巨匠可看看这个文章，他强烈建议我们不要使用@imports：

我们再来看截图：

这是ie下的截图，机能仍是很差：

第二种体例，一个引用，一个导入：

这是ie外其他流量器的截图，机能好于IE：

@import url(b.css');

<style>
<!--
@import url('a.css');
@import url('b.css');
-->
</style>

第五种体例，导入良多：

<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>

最后来看看第6种体例，两个都引用：

</link><link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>
</link><link rel='stylesheet' type='text/css' href='b.css'>

机能就酿成了这样的：

http://www.stevesouders.com/blog/

css9.net上说：

《高机能网站培植指南》（《High Performance Web Sites》）第5章如是说：“Link标签庖代@imort标签能带来机能上的收益；@import轨则有可能导致白屏现象；使用@import会导致组件下载的无序性。”