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

由 愚人码头 撰写 　

大家知道页面要使用外部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>

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

import-import

即两个css同时加载；

第二种方式，一个引用，一个导入：

<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>

再来看看截图：

link-import

也就是等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');

我们看截图：性能还是不好！

link-with-import

 

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


</link><link rel='stylesheet' type='text/css' href='a.css'>
</link><link rel='stylesheet' type='text/css' href='b.css'>

在b.css中导入c.css


@import url('b.css');

我们再来看截图：

这是ie下的截图，性能还是很差：

link-blocks-import

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

link-blocks-import-not-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>

性能就变成了这样的：

many-links

 

最后来看看第6种方式，两个都引用：


</link><link rel='stylesheet' type='text/css' href='a.css'>
</link><link rel='stylesheet' type='text/css' href='b.css'>

性能就变成了这样的：

import-import1

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

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

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

css9.net上说：

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

这篇日志由 愚人码头, 发表在 2009年04月11日 于 1:41 上午, 文件归档于 (x)html+css 标签为 and tagged , . 添加永久链接到书签中. 获得所有评论更新使用这里的 日志RSS源. 发表评论 或者复制引用通告地址: 引用通告 URL.

相关日志:

刚刚被浏览过的文章：

8 条评论

  1. lin
    发表了 2009年04月12日 在 2:14 下午 | 永久链接

    那么那个才是好啊!

  2. 愚人码头
    发表了 2009年04月12日 在 2:32 下午 | 永久链接

    引用(link)方式好！

  3. 法克一条龍
    发表了 2009年04月12日 在 11:17 下午 | 永久链接

    但我见同时用 link 或者 @import的效果是一样的？应该如何选择？

  4. 愚人码头
    发表了 2009年04月13日 在 12:04 上午 | 永久链接

    你可以看看这个
    强烈建议我们不要使用@imports：
    http://www.stevesouders.com/blog/

  5. 愚人码头
    发表了 2009年04月14日 在 12:16 上午 | 永久链接

    当然如果站点的流量没达到一定的流量（比如说10万ip或者更大），我觉得用link 或者 @import或者都是无所谓的，只要你维护方便

  6. ㄑ可乐ㄑㄑ(stri)
    发表了 2009年09月8日 在 11:25 上午 | 永久链接

    @法克一条龍
    后者会裸奔一刹那.*_^

  7. 可以匿名吧
    发表了 2009年10月10日 在 5:29 下午 | 永久链接

    写在一个css里 会不会强烈改善性能

  8. 愚人码头
    发表了 2009年10月10日 在 5:33 下午 | 永久链接

    @可以匿名吧
    这个是肯定的，但是个人认为这个要看你网站的流量，如果你的网站流量大，那么可以合并多个css，减少http请求，如果流量还不是很大，那么为了维护方便还是不要合并的好

2 个引用通告

  1. 由 不要使用@import方法导入样式表 | CSS9.NET 发表在 2009年04月13日 于 9:30 下午

    [...] 该书的作者最近又专门发布了一篇文章don’t use @import（中文翻译），详细分析了@import的使用弊端。 [...]

  2. 由 引用CSS:link和@import的区别 | ria之家--RIA三部曲：JQ、ext、flex 发表在 2009年06月16日 于 9:01 上午

    [...] 原文：http://www.css88.com/archives/1079 [...]

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时，昵称或个人网站填的是商业网站的，一概标记为垃圾评论不予显示，并设置相关网站为过滤关键字，提交到google、百度垃圾网站数据库