css选择符的性能

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