CSS选择器性能分析

尽管css选择器效率问题已经不是什么新鲜问题，可是我以为仍是有必要拿出来认真分析一下。以前只是看到别人这么写我也跟着这么写，并无想清楚问什么要这样写？这样写真的能提升页面渲染效率吗？尽管本身技术不怎么样，但仍是须要拿出一种打破砂锅问到底的决心来深究一下css选择器效率问题，经过本身写个demo亲自实践来加深一下对这个问题的理解。

事情的通过是这样子的，在以前的博文CSS选择器总结中介绍了各类不一样的css选择器，顿时以为css的世界很精彩，能够有不少种不一样的写法，想怎么写就怎么写，因而就有了这种代码

.wrapper ul li a{color:red;……}
.wrapper .list p.name{margin:10px 0;……}
* {margin:0;padding:0}
……

写完这样样式后，自我感受还不错，至少页面能呈现出来。但是直到有一天忽然发现

CSS选择器从右向左的匹配规则

个人世界瞬间崩塌了，由于根据阅读习惯在编写CSS的时候也会天然而然是从左向右逐渐细化。顿时很想搞清楚浏览器在将DOM tree变成render tree的时候css规则是如何匹配的？因而查了这么些资料：

• Why do browsers match CSS selectors from right to left?
• Writing Efficient CSS: Understand Your Selectors
• 编写高效的 CSS

看了这么多个人理解是从右往左匹配会首先过滤掉一大批不符合规则的样式，从而使得效率更高。举个例子

.wrapper .list a .demo{……}

若是从左往右匹配会先找到.wrapper,而后再找到里面不少的.list,在往里找直到找到那个.demo，查找的越深，过滤掉的也就越多，在这个查找的过程当中会有不少没用的样式也被遍历过，这里就致使匹配的效率很低。
若是从右向左匹配会首先过滤掉不是.demo的元素，在依次往上查找，越往上过滤掉的也就越少，这样效率明显比从左往右匹配要高不少
弄明白了从右向左匹配的规则那么咱们要如何写才能让浏览器更快的匹配到呢？
浏览器在面对众多的CSS样式代码时并非毫无规则的一个一个匹配，而是先将样式规则分为四个主要类别：

• ID 规则 这第一个类别包含了那些将 ID 选择器做为关键选择器的规则。
• Class 规则 若是一个规则将一个 class 明确做为它的关键选择器，那么它就属于该类别。
• 标签规则 若是一条规则将一个标签做为它的关键选择器，那么这条规则就属于该类别。
• 通用规则 不属于上面那些类别的规则都属于这个类别。

并引入关键选择器的概念(选择器最后的那部分)

.wrapper ul li a{color:red;……}           /* 关键选择器为a */
.wrapper .list p.name{margin:10px 0;……}  /* 关键选择器为.name */

根据关键选择器属于哪类再在这一类中查找，从而达到更快匹配的目的。那么问题来了，怎样写才能达到高效呢？
CSS选择器效率从高到低的排序以下：

1. ID选择器 好比#header
2. 类选择器 好比.promo
3. 元素选择器 好比 div
4. 兄弟选择器 好比 h2 + p
5. 子选择器 好比 li > ul
6. 后代选择器 好比 ul a 7. 通用选择器 好比 *
7. 属性选择器 好比 type = “text”
8. 伪类/伪元素选择器 好比 a:hover

以上引用自Steve Souders的Even Faster网站
在实际使用中咱们尽可能选择高效一点的选择器，可是有一点很难避免那就是组合选择器的使用，通常都会用到。在使用组合选择器时咱们须要注意一下几点：

• 若是规则拥有ID选择器做为其关键选择器，则不在须要添加其余规则了，由于ID是惟一的。
  • 差 .wrapper button#backButton {…}
  • 好 #backButton {…}
• 不要用标签名限定 class 规则，这会有损灵活性
  • 差 .wrapper p.name{…}
  • 好 .wrapper .name{…}
• 避免使用过分限制选择器(最好不要超过3层)
  • 差 body .wrapper .content .list {}
  • 好 .content .list{}
• 避免后代选择器,后代选择器是 CSS 中性能耗用最大的选择器。
  • 差 ul li a{}
  • 好 .list .list-content{}
• 依赖继承

原本想写几个demo展现出不一样选择器的效率的，可是很差演示，你们能够看看CSS selector performance
这篇文章中介绍了20中不一样的选择器的执行效率问题。

结合本身的实践经历，在编写CSS规则时需注意如下几点：

1. 嵌套层级最好不要超过3层
2. 避免使用标签选择器，尽量使用具体的类名
3. 不要给关键选择器添加多余的规则

CSS选择器在性能提高上尽管相对于js等提高空间不大，但在大型项目中高效率的css选择器的性能优点就能获得展示

原文连接：http://www.jesse131.cn/blog/2016/12/05/HTML-CSS/CSS_selector_performance.html