@import 对于网站的性能有某些负面…
来源:互联网 发布:fbp算法源代码及注释 编辑:程序博客网 时间:2024/05/17 20:35
LINK vs. @import
大家都知道,有两种方法可以在你的页面中导入样式文件。你可以使用LINK标签:
或者使用@import 方法:
我更喜欢使用LINK,因为它比较简单——而如果使用@import的话,你必须时刻记得要将@import放到样式代码的最前面,否则它将会不起作用。而且事实证明,避免使用@import同样对网站性能有益。
@import @import
我将探究LINK和@import两种方式的不同。在这些例子中,有两个样式表:a.css和b.css。每个样式表都配置为需要花费两秒钟来下载,这样就比较容易的看出来它们对网站性能的影响。第一个例子使用@import导入两个样式文件。这个例子,我们称之为@import@import,HTML代码可以写成这个样子:
如果你一直这种方式使用@import,那么就没有什么性能问题,尽管这可能会因为竞态条件而可能引起JavaScript错误。两个样式文件将同时并行下载,就像在图一中显示的那样(第一个小的请求是HTML该文件)。问题出现在当@import嵌套入其它样式中或者和LINK联合使用的时候。
图一:一直使用@import 是可以的
LINK @import
这个LINK@import的例子使用LINK加载a.css,使用@import导入b.css:
在IE中(在6, 7,和8中测试过),这会导致样式表文件逐个加载,正如图二所示。并行下载资源是加速页面的一个关键。就像图示的那样,这种方法在IE中会导致页面需要更多的时间才能加载完成。
图二. 在IE中link混合@import 会破坏并行下载
LINK嵌套@import
在这个LINK嵌套@import
HTML代码:
在a.css中:
这种方式同样阻止并行加载代码,但是这次是对于所有的浏览器。其实这个应该不会让我们感到奇怪吧,简单的想一下就能理解了。浏览器必须下载a.css先,并分析它,这个时候,浏览器发现了@import规则,然后才会开始加载b.css.
图三. 在在一个通过LINK加载的的样式文件中使用@import将会在所有的浏览器里面打破并行下载。
LINK 阻断 @import
上面的例子做一个细微的变化,IE中会引起惊人的结果:使用LINK导入a.css和一个新的样式文件proxy.css。proxy.css没有添加额外的样式,它只是用来通过@import 规则导入b.css.
这个例子在IE中运行的结果,LINK阻断@import,在图四中显示。第一个请求是HTML文档。第二个请求是a.css (花了两秒钟),第三个(很小)的请求是proxy.css。第四个请求是b.css(也花费了两秒钟)。令人震惊的是,在下载a.css完成之前,IE不会开始下载b.css。但是在其它所有的浏览器中,这种情况不会发生,结果页面显示的也比较快。如下图五所示。
图四. IE中,LINK 阻断使用@import嵌入的其它样式文件。
图五. 在非IE浏览器中,LINK不会阻断@import 嵌入样式表。
多个@imports
这个使用多个@imports的例子展示在IE中使用@import会引起资源被按照一个不同于预期的顺序下载。这个例子有6个样式表(每个将花两秒钟的下载时间)以及后面跟着一个js脚本文件(需要四苗种下载)。
看一下图六,最长的条条是耗时四秒钟的脚本。尽管它在代码里面被列在最后,但是在IE中,它被首先下载。如果脚本中包含的代码以来从样式表文件中应用的样式(比如getElementsByClassName),那么就将可能会发生意外的结果,因为脚本先于样式被加载,尽管开发人员将其置于代码的最后面。
图六 @import在IE中引发资源文件的下载顺序被打乱
LINK LINK
使用LINK来引入样式更简单和安全:
使用LINK 可确保样式在所有浏览器里面都能被并行下载。这个LINKLINK的例子演示了这一点,就像在图七中显示的那样。使用LINK 同样能保证资源按照开发人员制定的顺序下载。
图七:使用LINK确保在所有的浏览器里面都能并行下载
这些问题都需要考虑到IE。它非常不好的地方是,资源文件可能会在个别地方结束下载,所有浏览器在下载样式文件的时候应该执行一些前瞻以导入所有的@import规则并立即下载它们(通过@import导入的样式)。知道所有的浏览器都变成这种方式,我都会推荐避免使用@import并一直使用LINK来插入样式。
更多测试
根据读者的反馈,原作者增加了两项测试:使用@imports的LINK
图八:使用@imports的LINK
图九:多个LINK
看一下使用@imports的LINK
第二个问题是IE改变下载顺序。我在页面的代码的最底部添加了一个10秒的脚本(图中最长的条条)。在所有的非IE浏览器中,@import样式文件(proxy.css文件中引入)首先下载,然后才是脚本文件,严格的按照指定的顺序。然而,在IE中,脚本却先于@import 样式被插入,正如例子使用@imports的LINK
页面资源的加载时间被夸张的用来简单的查看发生了什么事情。但是对于那些使用窄带或网速比较慢的用户来说,特别是那些新兴的市场,这些响应时间可能有些远离实际。
- 在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程(也就是增加页面的总体加载时间)
- 在IE中使用@import将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载,这会阻碍页面的渲染,让人感到页面比较慢。
本文作者SteveSouders为《高性能网站设计》一书的作者,他是Yahoo网站性能团队的前领导人,目前效力于Google公司。他同时还是Firebug工作组的联合创立者,以及知名的网站性能分析工具的YSlow的创作者——前端观察
文章来源:http://www.qianduan.net/High-performance-web-site-do-not-use-import.html
- @import 对于网站的性能有某些负面…
- 浅析:网站优化之负面排名的因素有哪些
- 创建索引有哪些缺点?有哪些负面的影响?
- 网站系统架构对于性能方面的考虑
- 原创文章对于网站优化有怎样的重要性
- 【育儿方式遭批评,对母子都有负面…
- 取消Eclipse对于某些代码的格式化
- 【PHP】对于PHP某些代码的总结
- 如何删除网站信息负面
- 谷歌也能搜到李开复的负面报道
- Android 的负面信息
- 某些网站
- JavaScript全局优化带来的负面效果……
- 网站限制某些ip访问,仅允许某些ip…
- 雷锋读图:导致用户离开网站的8大负面因素
- 知觉图-消费者对于某些品牌偏好的形象化表述
- 对于某些有钱人,1亿元真的只是小目标
- 让网站禁止某些邮箱的注册
- editplus快捷键
- sublime 快捷键
- CSS字体中英文名称对照表 CSS…
- 分页功能学习笔记(Struts2+jsp)
- iframe安全威胁
- @import 对于网站的性能有某些负面…
- jade Language Reference
- CKEDITOR使用与配置
- 汇编 段内转移和段间转移
- 后缀数组的应用
- 查询前10条数据oracle
- Unbalanced calls to begin/end appearance transitions for <IDOOrderHomeViewController: 0x8da2960>.
- ios 打开图片库和相机选择图片界面修改为简体中文
- iOS: FFmpeg编译和使用问题总结