当浏览器解析html的时候,它构造了一个文档树来展现所有被显示的元素。 它在特定的样式表中去匹配元素,根据标准的css的层叠,继承和顺序规则,
在mozilla的实现中(可能其他的也是这样),对于每一个元素,css引擎通过规则去寻找匹配,css引擎评估每一个规则是从右到左的,从最右的selector开始,
也称之为key selector,直到找到匹配为止。
根据这个规则,越少的规则使用,css引擎将评估的越好。因此,移除没有用的css是改善页面性能的重要一步。之后,对于页面包含很多的元素的css规则,
优化这些规则也有利于提高页面的性能。优化页面性能最重要的一点在于使用明确的,避免不需要冗余的,使引擎系统快速的匹配到元素而不需要花费太多的时间。
下面的这些规则被认为是低效的
- 使用了后代选择器
使用全局选择器作为key
body * {...}
.hide-scrollbars * {...}
使用了标签选择器作为key
ul li a {...}
#footer h3 {...}
- 使用子选择器和相邻选择器
使用全局选择器作为key
body > * {...}
.hide-scrollbars > * {...}
使用标签选择器作为key
ul > li > a {...}
#footer > h3 {...}
|
|
子选择器和相邻选择器是低效的是因为对于每一个元素的匹配,浏览器不得不评估其他的一些元素,它需要双倍的时间耗费在匹配上。同时,越少的精确的
key,越多的时间花费在匹配元素上面。尽管如此,即使是不高效的,他们比后代选择器的使用的效果要好一点。
- 过渡的限定选择器
id选择器是唯一的,包含了tag或者class的限定仅仅是增加了一些无用的信息(浏览器去评估)
ul#top_blue_nav {...}
form#UserLogin {...}
- 使用:hover在一些没有:hover的元素上面
在非标准模式下面。ie7,ie8将忽略这些规则。在标准模式下面,可能会导致一些性能的退化
h3:hover {...}
.foo:hover {...}
推荐的方式
- 避免使用全局样式
允许一个元素去继承它的祖先,或者使用一个class去应用复杂的元素。
- 将规则写的越精确越好
偏向使用class ,id,少使用tag
- 移除一些无用的限定
下面的这些限定是多余的:1.id选择器被class 或者tag选择器限定;2.class被tag选择器进行限定(如果一个class只被用于一个tag,这也是很好的实践)。
- 避免使用后代选择器,特别是包含了一些无用的祖先元素
eg:body ul li a{...} 制定了一个无用的body限定,因为所有的元素都是在body中。
- 使用class选择器取代后代选择器
eg:如果你需要两个不同的样式(一个无序列表,一个有序列表),不要使用下面的样式
ul li {color:blue}
ol li {color:red}
应该这样的使用
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
如果你一定要用后代选择器,建议你使用子选择器
- 避免使用:hover在一些没有连接的元素上面(对于ie序列的)
如果你使用:hover在一些无连接的元素上面,ie7,8会认为他们是无用的。建议使用事件onmouseover 来模拟。
转自网络
分享到:
相关推荐
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...
css写法的简单操作,真实用,虽然简单,但在实际开发中都能用到。
Moo-CSS 模块化面向对象的css写法
管理css css注释写法的例子 管理css css注释写法的例子 管理css css注释写法的例子
css浏览器兼容写法 如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head{color:#000;} 如果只让ff、IE8看见用html>/**/body .head{color:#000...
兼容IE的最小最大高度CSS写法
书写高效的CSS指南,书写高效的CSS指南,书写高效的CSS指南
css3总结文档, 一些常用的写法 css3总结文档, 一些常用的写法 css3总结文档, 一些常用的写法
svg转css,css转svg,svg与css互相转换并压缩
高效学习CSS布局之道:通过244个范例掌握网页样式与布局技术
《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本,确保所讲解的内容...
css a链接 写法 新手篇
各浏览器css兼容写法各浏览器css兼容写法
一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css一些网页和css
这是一个支持多浏览器的css通用的写法。
css样式布局写法,css样式布局例子程序
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗,是广大CSS设计人员和前端开发人员必备的参考书,同时也非常适合大中专院校师生学习阅读,也可作为高等...
以前这种类似的效果,懒人之家也收录过,不过需要一些较为复杂的js才能实现,跟目前的这款比起来,那个还是比较占用内存的 我们的口号是,能用css解决的事情,就不要动用js 今天的这款效果,鼠标悬停背景图片...
根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS