CSS 选择器性能优化

浏览器计算样式的规则

通常来说，计算样式的第一步是创建一组匹配选择器，即浏览器计算出给指定元素应用哪些类、伪选择器和 ID；第二步涉及到从匹配选择器中获取所有样式规则，并计算出此元素的最终样式。

浏览器读取 CSS 选择器遵循从右到左的顺序，例如下面的 CSS 选择器：

.box:nth-last-child(-n+1) h1 .title {
    /* styles */
}

那么浏览器要做的事情是：

1. 寻找所有包含 title 类的元素
2. 在这些元素中，筛选出其父元素是 <h1> 标签的元素
3. 接着再筛选出父元素是其父元素中第奇数个子元素的元素
4. 对经过筛选后的元素应用样式

CSS 选择器性能排行

Steve Souders（Google Web 工程师，曾经写过三本 Web 性能为主题的 O’Reilly）曾于 2009 年总结了 CSS 选择器性能排行：

1. ID 选择器（ #id ）
2. 类选择器（ .className ）
3. 标签选择器（ div h1 p ）
4. 相邻选择器（ h1+p ）
5. 子选择器（ ul > li ）
6. 后代选择器（ li a ）
7. 通配符选择器（ * ）
8. 属性选择器（ a[rel="external"] ）
9. 伪类选择器（ a:hover li:nth-child ）

由于从右往左匹配，因此即使是同一类型的选择器之间的性能也有差异 —— 后代选择器中，最右侧是 ID 的选择器的性能就优于最右侧是类的选择器。