不要使用@import[译]
作者:vocal 来源:前端观察 发布时间:2009-05-01 12:01:00
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 会破坏并行下载
猜你喜欢
- 之前用Crystal做了一个数字转English Word的Formula刚刚心血来潮, 大半个晚上写了JS版本的数字转换, 由于JS的Bu
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1.如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- 代码如下:'返回某年总共有多少天 Function DayOfYear(ByVal y) DayOfYear = DatePart(
- 在新建数据库或附加数据库后,想添加关系表,结果出现下面的错误: 此数据库没有有效所有者,因此无法安装数据库关系图支持对象。若要继续,请首先使
- 下面继续为大家带来XHTML与HTML兼容的16条指引!1.避免将页面声明为XML类型,页面使用UTF-8或者UTF-16字符集。2.在空元
- 一、出错情况 有些时候当你重启了数据库服务,会发现有些数据库变成了正在恢复、置疑、可疑等情况,这个时候DBA就会很紧张了,下面是一些在实践中
- 1005:创建表失败1006:创建数据库失败1007:数据库已存在,创建数据库失败1008:数据库不存在,删除数据库失败1009:不能删除数
- function getBytesLength(str){ var re=/[\x00-\xf
- 什么是Canvas<canvas> 是一个新的 HTML 元素,这个元素在 HTML5&
- 以下列出了两种数据库的方法:ASP+Access20001.要获取的ID值字段属性必须设为:自动编号(我们假设字段名为recordID)2.
- 1.在使用MySQL和php的时候出现过中文乱码问题(1) 只要是gb2312,gbk,utf8等支持多字节编码的字符集都可以储存汉字,当然
- 一些很实用且必用的js小脚本代码:脚本1:进入页面后自动播放音乐或其它声音文件<embed src="音乐地址&q
- 即使MyISAM表格式非常可靠(SQL语句对表做的所有改变在语句返回之前被写下),如果下列任何事件发生,你依然可以获得损坏的表:&m
- Asp定时执行操作、Asp定时读取数据库(网页定时操作详解)'----------------------版权信息---------
- 在蓝色看到的几个js日历代码,整理了一下。大家可以用在blog上,或者可以用在表单的日期类型的数据选择中,方便大家填写日期。1.动感的日历,
- 这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间,七拼八凑,总算是把这个效果写出来了。哎!还是
- 不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能?这个功能允许用文字和图片做为主菜单,如果用文字的话要先做虚拟链接。下面简单
- 现在流行虚拟主机建站,我也有个网站,也算是个站长咯。当了近一年的站长,感到网站程序每次升级的时候颇为麻烦:先去官方看公告,然后下载升级包到本
- 垃圾评论,垃圾留言,人见人憎,用了验证码,效果也好不到哪里去,还影响用户体验。有的网站甚至不惜牺牲用户体验,而构造强悍的惨不忍睹的超级验证码
- 从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子,感慨良多。手机网站开发,有着