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;

第一种方式,两个都导入:

[code=’html’]

[/code]

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

import-import

即两个css同时加载;

第二种方式,一个引用,一个导入:
[code=’html’]

[/code]

再来看看截图:

link-import

也就是等a.css下载完成了后再下载b.css,页面性能明显下降;

 

第三种方式,引用a.css,在a.css导入b.css:

[code=’html’]

[/code]

在b.css中导入a.css

[code=’html’]

@import url(b.css’);[/code]

我们看截图:性能还是不好!

link-with-import

 

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

[code=’html’]

[/code]

在b.css中导入c.css

[code=’html’]

@import url(‘b.css’);[/code]

我们再来看截图:

这是ie下的截图,性能还是很差:

link-blocks-import

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

link-blocks-import-not-ie

 

第五种方式,导入很多:

[code=’html’]

[/code]

性能就变成了这样的:

many-links

 

最后来看看第6种方式,两个都引用:

[code=’html’] [/code]

性能就变成了这样的:

import-import1

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

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

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

css9.net上说:

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


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(0) 打赏
未经允许不得转载:WEB前端开发 » CSS引用(link)和导入(@import)的区别(2009年4月13日更新)

评论 12

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    那么那个才是好啊!

    lin10年前 (2009-04-12)回复
  2. #2

    引用(link)方式好!

    愚人码头10年前 (2009-04-12)回复
  3. #3

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

    法克一条龍10年前 (2009-04-12)回复
  4. #4

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

    愚人码头10年前 (2009-04-13)回复
  5. #5

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

    愚人码头10年前 (2009-04-14)回复
  6. #6

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

    ㄑ可乐ㄑㄑ(stri)9年前 (2009-09-08)回复
  7. #7

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

    可以匿名吧9年前 (2009-10-10)回复
  8. #8

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

    愚人码头9年前 (2009-10-10)回复
  9. #9

    没看明白。是写在里的,@import 是写在css 中的,他们是怎么应用的。
    我是小白请多指点

    小白4个月前 (08-07)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏