css选择符的性能
来源:互联网 发布:mac pro怎么放光盘 编辑:程序博客网 时间:2024/06/01 22:00
大部分情况下,大家都关注js性能,那么css性能又如何呢?
针对css的性能,有一些最佳实践:
1、把样式表放在文档head标签中
2、不要在ie中使用css表达式
3、避免使用过多的行内样式
浏览器尝试把css选择符和文档中的元素匹配起来,css选择符的编写方式决定了浏览器必须执行的匹配次数,某些选择符会导致浏览器尝试更多匹配,因此开销比简单选择符更高。
下面介绍css选择符大致按照最简单(最小开销)到最复杂(最大开销)顺序列出:
1、ID选择符: #top{}
2、类选择符:.top{}
3、类型选择符:a{}
4、相邻兄弟选择符:h1 + #top{}
5、子选择符 #top > a
6、后代选择符: #top a{}
7、通配选择符 :*{}
8、属性选择符:[href="#index"] {}
9、伪类和伪元素:a:hover{}
看如下规则:
#top a{}
多数人可能猜想浏览器是从左到右匹配规则,因此推测这条规则开销不高,因为页面中有唯一的#top,然后去匹配几个a,所以这样的选择符应该是相当高效的。事实上,CSS选择符是从右到左进行匹配 ,浏览器从右开始,遍历文档中所有的a,然后匹配每个链接的父节点和文档树去查找 a 的祖先元素是否id 为top。
那么如何编写高效的css选择符,下面是一些实践指南:
1、避免使用通配规则
2、不要限定id选择符
在页面中一个ID只能对应一个元素,所以类似 div#top是没有必要的,应简化为#top
3、不要限定类选择符
例如把 li.chapter 改成 .li-chapter 会更好
4、不要试图编写 #top ul li a{} 这样的长选择符,最好创建一个 .list{} 这样的类选择符并把它添加到适当的元素上
5、避免使用后台选择符
6、避免使用子选择符
7、质疑子选择符的用途
检查所有子选择符,然后尽可能用具体的类取代他们
8、依靠继承
- css选择符的性能
- web性能优化-简化css选择符
- CSS的选择符
- CSS的选择符
- css属性的选择对动画性能的影响
- 3.4. CSS 选择符 -- CSS的名字
- jquery的CSS选择符
- CSS选择符的优先级
- css有用的选择符
- 牛气的CSS选择符
- css选择符的优先级
- css选择符的使用
- CSS的属性选择符
- CSS的选择符(selectors)
- 了解css选择符的权重问题
- 编写高效的css选择符
- CSS常用的三种选择符
- 编写高效的CSS选择符
- 收集的一些Java与游戏开发相关资料
- Tongweb优化四步骤
- listView的可重用机制对性能的影响
- 如何实现自编号
- 数据库学习笔记
- css选择符的性能
- QString 与中文问题
- Android/System Properties
- 函数的参量不能和变量同名
- Ext.data-DataReader/ArrayReader/JsonReader/XmlReader
- 多玩的一道笔试题
- linux shell 的 for 循环
- 2012年Google校园招聘笔试最后一题
- 打印Object