大部分情况下,大家都关注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、依靠继承