登录论坛 | 注册会员 设为首页 | 收藏本站
当前位置 : 首页>软件学院>程序开发>CSS>正文
 
css的效率和浏览器渲染的速度

http://www.dbit.cn 2010-5-31 7:46:17  来源:东北IT网  编辑:叶子
 
浏览器如何读取你的CSS选择器有一个很重要的原则,那就是它们从右到左读取。这意味这像 ul > li a[title="home"] 这样的选择器,a[title="home"] 将是最先被读取的。

我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢,浏览器渲染的速度又如何呢?


这是应该是浏览器开发者应该关心的(页面加载更快,用户就会更愉快)。Mozilla有一篇文章: about best practices . Google 当然也很关心这个问题,他们也有这样一篇文章:Optimize browser rendering


让我们了解下他们主要倡导的东东,然后讨论他们的实用性。


从右到左


浏览器如何读取你的CSS选择器有一个很重要的原则,那就是它们从右到左读取。这意味这像 ul > li a[title="home"] 这样的选择器,a[title="home"] 将是最先被读取的。这一部分通常被称为 “key selector” (可否称为“目标选择器” -_-!)选择器的最后一部分,也是被选择的标签。


ID's 是最有效率的,通用符是最慢的


有四种目标选择器:ID, class, tag和通用符。看下他们各自的效率如何:
#main-navigation { } /* ID (最快) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (最慢) */
#content [title='home'] /* Universal */ 然后我们结合从右到左和目标选择器的概念,我们可以知道下面这个选择器并不高效:
#main-nav > li { } /* 看着很快实则很慢 */
尽管这让人有点费解......因为ID's是最高效的,浏览器可以通过ID迅速的找到 li。但事实是,li 标签是被先读取的。


不要用标签修饰


死也不要像下面这样干:





ul#main-navigation { }

ID's 是唯一的,所以不需要用标签修饰,这只会让它更低效。
如果你可以避免的话,也不要用它修饰 class 。class 不是唯一的,所以理论上你可以把它用在不同的标签。如果你愿意的话,你可以用标签控制不同的样式,这样你可能需要标签修饰(比如:li.first),但这样做的人很少,所以,don't .


绝对没有比用后代选择器更糟糕的做法了
David Hyatt:
后代选择器是CSS里最昂贵的选择器,昂贵得可怕——特别是当它放在标签和通用符后面时。
就如下面这个东东一样,绝对的效率毒瘤:





html body ul li a { }

一个选择器渲染失败比这个选择器被渲染更高效


我不是很确定是否有更好的证据去证明这一点,因为如果你有大量的选择器在CSS样式表里无法找到,这样的事情貌似很离奇,但一点必需注意的是,从右到左的解释一个选择器来说,一旦它找不到,那它就会停止尝试。然而如果它找到了,那它就需要花更多精力去解释了。


试想一下为何你这样写选择器


思考下这东东:





#main-navigation li a { font-family: Georgia, Serif; }

你可能不需要从 a 选择器开始(如果你只是想换个字体)。下面这个可能更高效些:





#main-navigation { font-family: Georgia, Serif; }

实用性


还刻前面提到的Mozilla的一篇文章?已经有十年了。事实是:计算机比十年前变慢了(不是我理解错了,还是作者想说现在的WEB越来越复杂了)。我感觉这东东在当年似乎还更受重视。十年前我还是个21岁的英俊小生,当然我不觉得那里我会认识css这东东。所以我也无法跟你讲以前的情况......但我觉得渲染效率的问题之所以没被重视是因为这从来就不是一个大问题。
这是我的一些看法:不管怎样上面提到的东东都是有意义的,你可以按照上面的方法去做,因为它并不会限制你的CSS制作。但你也没必要太教条主义。如果你是个完美主义者,而之前又没有考虑过那东东,那是时候去重新看一下你之前写的一些样式是否有改进的地方了。如果你没发现你的网站明显的渲染缓慢,那大可别太在意,在以后的工作中多注意就行了。


超级快速,零实用性


我们知道ID's 是最高效的选择器。当你想让渲染速度最高效时,你可能会给每个独立的标签配置一个ID,然后用这些ID写样式。那会超级快,也超级荒唐。这样的结果是语义极差,维护难到了极点。即使在核心部分你也不应该见过这样做的。

本新闻共2页,当前在第1页  1  2  

 
收藏】【打印】【进入论坛
  相关文章:

·CSS3 Media Queries 详解
·CSS实例教程:非浮动区域设置宽度
·关于CSS HACK 解决兼容的写法 
·小议使用“完整”的CSS的缺点
·关于CSS不透明的详细介绍 
·CSS中设置段落间距的方法
·用css网站布局之十步实录
·DIV+CSS布局代码精简对SEO的影响 
·CSS教程:网页中英文字体的设置 
·css3文本阴影属性text-shadow说明 
·css3阴影属性box-shadow注意事项 

 
 
 
 
最新文章

中关村艳照门女主角详记录高清组图 
大连护士门大尺度艳照高清组图
iPhone女孩微博爆红 最宝贵东西换iPhon
反恐精英之父内维尔:改变电脑游戏销售
团购网站黎明之前:中国市场惨烈厮杀不
团购鼻祖Groupon中国揭秘:快与慢的商业
Spil Games发布新的品牌形象
1800配置一台主机 不要显示器
联想V360笔记本模特写真
爱国者第四代移动硬盘将面市、低电压保

 
推荐文章
1
2
3
4
5
6
7
8
9
10
iPhone女孩微博爆红 最宝贵东西换
大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组
苹果员工中毒门
宫如敏不雅照疯传 看张馨予韩一菲
深耕市场 永续经营——专访百脑汇
优派专业电子书 让您回家旅途多姿
揭晓百万大奖三星bada魅力绽放中
大明龙权“江湖英雄会”全国PK大
永恒之塔校园达人挑战赛完美落幕
八卦图解 More>>
iPhone女孩微博爆红 最宝贵东西换 大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组 宫如敏不雅照疯传 看张馨予韩一菲