书写更有效率的 CSS 选择器

这里的效率不是说开发者写代码的效率，而是浏览器执行这个选择器的效率。

在看 CSS 的书或者教程的时候，是不是看过这句话：“浏览器是从右至左来处理选择器的”。当然了，如果你没有看到过这句话也无所谓，现在有同样意思的话，就放在这里，现在看也无妨。

那么再来说下浏览器工作的过程，这里是渲染的过程，得到数据之后，浏览器要先绘制一个 DOM 树，然后再有一个 “reflow” 的过程，这个过程就是在 CSS 文件下载之后，确定要渲染的元素在 DOM 中的位置，而 CSS 样式中，很多很多在应用的时候都要有一个 “reflow” 的，过程，所以，避免这个过程，后者减少这个过程，都会相当大的提升浏览器的效率。

还有一个就是 CSS 选择器的优先问题了，这个这里不多说了。

那么，我们不多废话，直接上例子和代码：

例如，我们通常的选择器会这么写

.content a {}

那么根据上面几条理论，浏览器的工作过程是绘制好 DOM 树之后，就会查找页面中所有 a 元素了。查找到所有的 a 元素之后，又开始查找出于 .content 类下面的 a 元素，此时，如果页面有好多好多 a 元素就会是一个非常耗费资源的事情。那么如果这里有更多个 .content 呢？

所以，我们可以这么写，给每一个 a 元素添加一个 class 就可以了。

然后变为

.content .xxx {} 或者 #xxx .xxx {} 这样呢，效率就会更高了。

那么，还有一种情况就是使用太多的层了，也就是限制太多了，例如；

#xxx ul li p a {}

同样的按上面的理论来说，先找所有的 a 然后找所有包含 a 的 p ，依此类推，那么效率肯定是很低喽。

改写后的 可以给 a 添加 class，那么就可以写作 #xxx .xxx {} 效率高了不是一点两点啊。或者给 ul class 嘛，那么就写作 .xxx p a {} 但是这样效率提升并不明显啊。

好了，完了，这只是基本的方法。前端效率的提升，需要慢慢理解，慢慢琢磨，慢慢来嘛。