CSS选择器的一般性优化建议

如何对选择器进行优化并不是一个那么新鲜的话题，但是个人觉得，css作为前端开发人员一项必备的专业技能，有必要深入了解下css在页面渲染的一些关键点，并以此为css的优化提供依据。我们这篇文章将讨论选择器优化的一般性建议。

浏览器如何应用选择器

在给出css选择器优化建议之前，我们有必要弄清楚这样一个问题，那就是浏览器如何识别选择器并对相应的html元素进行样式渲染？

浏览器对CSS的匹配原理是这样的，浏览器读取选择器的顺序是由右到左进行。

比如，

div#divBox p span.red {
    color:red;
}

浏览器的匹配查找顺序如下，

1. 查找页面中所有class=red的span元素
2. 查找1.结果的父元素中是否有p元素
3. 查找2.结果的父元素中是否有id=divBox的div元素

如果以上3步都能找到相应的结果，那么则会给匹配的最终结果应用相关的css样式。

css选择器的效率

从上面的结论和示例中，我们知道浏览器是从右到左逐个匹配css表达式的。那么为什么浏览器会采用这种从右至左的方法来匹配css表达式呢？其好处有两个，第一是为了尽早的过滤掉无关的样式规则第二是为了尽快的匹配到目标元素。很显然表达式最右的样式规则以及整个css表达式的长度将决定整个匹配过程的复杂度。这个最右部分的css表达式，我们称之为keyselector（关键选择器），它将决定css选择器的效率高低。

这篇文章中给出了常规的css选择器的效率，

1. id选择器，比如#header
2. 类选择器，比如.main
3. 类型选择器，比如div
4. 兄弟选择器，比如div + p
5. 子元素选择器，比如div > p
6. 包含选择器，比如div span
7. 通配选择器，比如div *
8. 属性选择器，比如input[type="text"]
9. 伪类选择器，比如a:hover,ul:nth-child(2n)

可见id选择器的效率最高，而伪类选择器的效率最低。CSS3提供的各种伪类选择器虽然用起来很方便，不过其效率反而是最低的。

根据上面的理论，我们会得出下面的结论，div #user会比#user div的效率要高。因为前一个选择器表达式的关键选择器#user是一个id选择器，后一个选择器表达式的关键选择器div是一个类型选择器，而id选择器的效率要比类型选择器的效率要高。换句话说，前者经过关键选择器的匹配之后得到的集合要比后者要小，在一个更小集合上再次做匹配筛选，明显要更加快一点。

css的优化建议

一般来说，我们书写css时应该遵循下面几点，

1. 规范css的命名和属性书写，能够体现出css代码的整齐性和条理性
2. 应用css优先级（css权重）的知识避免冗余的兄弟选择器、子选择器、包含选择器，写出精简、合理的css表达式
3. 不到不得以勿用各种css hack
4. 合理使用css的绝对定位布局（绝对定位往往不太利于后续的维护和变更）
5. 合理使用css的继承
6. 尽量使用简写风格的css样式，将相似属性写在一起（主要是为了缩减css文件字节，加快浏览器渲染）
7. 限制css的嵌套层级，一般来说4层之内都是可以接受的
8. 模块化css样式（可以模仿业内流行css框架的做法，比如bootstrap）

参考列表

• CSS选择器的优化
• Writing efficient CSS selectors
• css原理及其优化