CSS选择器优化

性能优化

点击阅读 文章原文

CSS选择器性能损耗 来源
主要是来源于 浏览器匹配选择器和文档元素时所消耗的时间，因为构建CSS Rule Tree 是根据DOM元素来进行匹配的，所以如果选择器的选择比较复杂的话，计算会比较费时。

因为CSS选择器是 从右到左 进行规则匹配的

CSS选择器的执行效率 (从高 → 低)

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

根据以上「选择器匹配」与「选择器执行效率」原则，我们可以通过避免不恰当的使用，提升 CSS 选择器性能。

总的来说，在写CSS的时候需要遵循以下以下的一些规则

1. 避免使用通用选择器
2. 避免使用标签或class选择器限制 id 选择器 (即最好不要用执行效率低的来限制 执行效率高的)
3. 避免使用多层标签选择器。使用 class 选择器替换，减少css查找
4. 避免使用子选择器

如果可以的话，尽量使用 id 或者 class 来进行选择器的选择，不过相比于其他的优化，CSS的优化只有在页面DOM元素大量的时候，优化效果才会比较佳，比如 淘宝首页等！，自己的页面其实用CSS的优化效果不是特别好。