CSS 选择器性能优化

2019-1-14 10:11| 作者: admin| 查看: 8969| 评论: 0|来自: 蚂蚁部落

在从事前端之初,很可能,让页面能够正常显示就是最大的目的。

但是随着技术进步,页面的正常显示已经不是最高追求,转而追求更好的性能。

就如同解决温饱之后,必然会追求生活品质,这不仅是项目本身的需求,也在于对自身提高的内在要求。

本文介绍如何使用CSS选择器才能提升性能,对于小型项目可能无关紧要,但是对于庞大的项目则效果明显。

一.CSS选择器的解读:

我们总是以自己固有的思维习惯去理解一些事物,从而导致一些误读。

对于浏览器如何解析CSS选择器可能也会有类似的误读,以如下简短代码为例子:

[CSS] 纯文本查看 复制代码
#ant > a{
  color: red;
  font-size: 12px;
}

非常简单的一段代码,常见错误分析如下:

(1).首先,找到id属性值为"ant"的元素。

(2).然后,再在上述元素中查找链接<a>元素。

读书绝大多数是从左到右,代码的解析大多也是如此,所以很有可能想当然认为,CSS选择器的解读也是从左到右,然而事实却恰恰相反,是从右向左进行解析的,正确方式如下:

(1).首先,超找页面中的所有链接<a>元素。

(2).然后,沿着DOM树继续向上超找链接<a>的直接父元素的id属性值是否是"ant"。

对于CSS选择器的解读方式总结如下两点:

(1).从右向左进行匹配。

(2).如果当前选择器的左边还有其他原则器,那么会继续向左匹配,直到超找到匹配的元素或者退出匹配。

二.CSS选择器的性能:

不同类型的选择器,性能可能会大相径庭,比如类选择器的性能就远高于通配符选择器(*)。

看如下简单代码实例:

[CSS] 纯文本查看 复制代码
#ant * {
  color: red;
  font-size: 12px;
}

上述代码的性能非常差,尤其对于一个超大型页面,由于从右向左进行匹配,这个通配符会匹配页面所有的元素,这个开销是非常大的,所以一个CSS选择器性能的关键在于最.右侧的选择器,所以通常称最右侧的选择器为“关键选择器”,所以选择器优化的最关键的一点就是“关键选择器越具体,性能越好”。常见选择器性能排序如下:

(1).ID选择器

(2)类选择器

(3)元素选择器

(4)兄弟选择器

(5)子选择器

(6)后代选择器

(7)属性选择器

(8)伪类/伪元素选择器

上面是常见的CSS选择器,性能从上到下越来越低。

特别说明:id可能确实比类性能要好,但是也好不到哪里去,基本上属于伯仲之间,差距没有想象的那么大。

三.CSS选择器优化推荐:

了解到CSS选择器的匹配顺序,和单个选择器之间的性能差距。

那么就可以根据对应的规律,写出性能更为良好的选择器,下面列举几个常见的推荐:

(1).尽可能不使用通配符选择器:

[CSS] 纯文本查看 复制代码
#ant * {
  color: red;
  font-size: 12px;
}

前面说过,关键选择器越具体越好,通配符选择器实在是最不具体的一个。

(2).合理避免使用id选择器:

前面说过,id选择器的性能最好,难道我们将每一个元素都添加一个id属性,肯定不现实。不过规范还是建议尽可能少的使用id选择器,这就是最佳实践与最佳性能之间的一个平衡或者取舍。

使用id确定元素在网页中的位置,应该始终考虑使用class,而不是id,除非只使用一次。

id选择器用于标识持久的结构性元素,此元素并不能重复使用,比如一个导航模块:

[CSS] 纯文本查看 复制代码
#nav {
  color: red;
  font-size: 12px;
}

(3).避免使用标签限定id或者类选择器:

代码中经常看到如下几种使用方式,简单举例如下:

[CSS] 纯文本查看 复制代码
div#nav {}
div.ant {}

尤其是不能理解第一个选择器,id已经可以确定一个元素了,为何还要来一个标签限制。

本来id选择器检索到指定元素了,发现左侧还有一个div选择器,还要耗费一下性能。

(3).减少后代选择器的使用:

尽可能避免使用后代选择器,最好使用子选择器替代。

div>a的性能肯定要好于div a。

首先使用a选择器匹配页面所有链接<a>元素,后代选择器要一层层查找最终确定当前a是否具有div父元素,但是子元素选择器只要查找一层就可以了,性能可以优化很多。

(4).尽可能使用继承:

[CSS] 纯文本查看 复制代码
#nav {} 
#nav > .span { font-size:24px; } 
#nav > .a { font-size:24px; }

上述代码可以优化如下:

[CSS] 纯文本查看 复制代码
#nav {font-size:24px;}

使用继承,而不是每一个选择器都设置一次。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部