快速业务通道

CSS设计制作网页不要使用@import

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02

Translate From:stevesouders
原文:高性能网站设计:不要使用@import

在高性能网站设计的第五章,我简要的提到@import 对于网站的性能有某些负面的影响,然后我在 Web 2.0 Expo 的演讲上深入探讨了这个问题,并创建了一些测试页面和HTTP瀑布状图表,这些在下面将会用到。对于这个问题的底线是:如果你想样式表并行载入,以使页面更快,请使用LINK 替代@import。

LINK vs. @import

大家都知道,有两种方法可以在你的页面中导入样式文件。你可以使用LINK标签:

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

或者使用@import 方法:

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

我更喜欢使用LINK,因为它比较简单——而如果使用@import的话,你必须时刻记得要将@import放到样式代码的最前面,否则它将会不起作用。而且事实证明,避免使用@import 同样对网站性能有益。

@import @import

我将探究LINK和@import两种方式的不同。在这些例子中,有两个样式表: a.css和b.css。每个样式表都配置为需要花费两秒钟来下载,这样就比较容易的看出来它们对网站性能的影响。第一个例子使用@import 导入两个样式文件。这个例子,我们称之为@import @import,HTML代码可以写成这个样子:

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

如果你一直这种方式使用@import,那么就没有什么性能问题,尽管这可能会因为竞态条件而可能引起JavaScript错误。两个样式文件将同时并行下载,就像在图一中显示的那样(第一个小的请求是HTML该文件) 。问题出现在当@import嵌套入其它样式中或者和LINK联合使用的时候。

图一:一直使用@import 是可以的

LINK @import

这个LINK @import的例子使用LINK加载a.css,使用@import导入b.css:

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

在IE中(在6, 7, 和8中测试过),这会导致样式表文件逐个加载,正如图二所示。并行下载资源是加速页面的一个关键。就像图示的那样,这种方法在IE中会导致页面需要更多的时间才能加载完成。

图二. 在IE中link混合@import 会破坏并行下载

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号