原文：http://www.css88.com/archives/1079
作者：愚人码头
大家知道页面要使用外部css文件的方式有两种，一种是引用(link)，例如：<link rel=’stylesheet’ href=’a.css’>；另一种是导入(@import)，例如：<style>@import url(’a.css’);</style>；两者引用的方式在页面上的展现效果却是一样的，但是两者又有着很重大的区别：就是页面的性能问题！
当然如果站点的流量没达到一定的流量（比如说10万ip或者更大），我觉得用link 或者 @import或者都是无所谓的，只要你维护方便。
假设我们一张页面使用了两个样式文件:a.css和b.css;
第一种方式，两个都导入：
<style> <!-- @import url('a.css'); @import url('b.css'); --> </style>我们可以用使用工具分析一下网页的加载情况，如图：
即两个css同时加载；
第二种方式，一个引用，一个导入：
<link rel='stylesheet' type='text/css' href='a.css'> <style> @import url('b.css'); </style>再来看看截图：
也就是等a.css下载完成了后再下载b.css,页面性能明显下降；
第三种方式，引用a.css，在a.css导入b.css：
</link><link rel='stylesheet' type='text/css' href='a.css'>在b.css中导入a.css
@import url(b.css');
我们看截图：性能还是不好！
第四种方式，引用a.css和b.css(b.css只是导入c.css)，b.css导入c.css：
<link rel='stylesheet' type='text/css' href='a.css'></link> <link rel='stylesheet' type='text/css' href='b.css'></link>在b.css中导入c.css
@import url('b.css');我们再来看截图：
这是ie下的截图，性能还是很差：
这是ie外其他流量器的截图，性能好于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>性能就变成了这样的：
最后来看看第6种方式，两个都引用：
</link><link rel='stylesheet' type='text/css' href='a.css'> </link><link rel='stylesheet' type='text/css' href='b.css'>性能就变成了这样的：
关于使用@import的弊端：
