wed前端开发中高性能的选择器

wed前端工开发程师|web前端 ui开发 开源|python 网络开发 前端

选择器,是css中不能更常见的东西。但是很多人却不知道,不同的选择器其实性能是不一样的。了解选择器的在浏览器的解析原理以及不同选择器的解析速度,能够让我们的css性能速度锦上添花。
一、选择器在浏览器的解析原理
css 代码

#column .content div {
    color: Red;
}
一般情况下我们都是从左到右来阅读代码的,因此对于上面这行代码,我们也会习惯性地以为浏览器是从左到右进行解析的:首先找到id为column的元素,然后再查找该元素下面class为content的元素,最后在已经匹配的元素下查找所有的div元素。
但是事实上却恰恰相反,浏览器对选择器规则是从右到左进行解析的:首先查找所有的div元素,然后再查找该div元素是否存在具有content类的父元素,最后在已经匹配的父元素中继续残向上查找祖先元素是否含有id为column的元素。
当然,如果浏览器是从左到右解析选择器规则的话,上面这个选择器效率很高。但事实上浏览器是从右到左进行解析的,这种看似十分高效的选择器匹配开销是很高的,因为浏览器必须首先遍历页面所有的div元素,然后才确定其父元素的class是否content。
看到这里,小伙伴们必须大吃一惊:“我out了!”
二、不同选择器的解析速度

举例:
css 代码

#column .content div {
    ……
}
#column .test {
    ……
}
#test {
    ……
}
问大家一个问题,这3种选择器选中的都是同一个元素,那么性能最高的是哪个呢?实际上,第三个性能最好,第一个性能最差。由于第三个选择器直接使用id选择器,而id在整个页面具有唯一性,因此可以快速定位。第一个选择器需要先匹配所有的div元素,对于一个页面来说,这是个不小的匹配量。
浏览器解析选择器的原则是从右到左的,因此我们书写的最右边的一个选择器,被称作关键选择器。这个关键选择器,对于执行效率有决定性的影响。Google资深web开发工程师Steve Souders对css选择器的匹配效率从高到低做了一个排序:

(1)id选择器;
(2)class选择器;
(3)元素选择器;
(4)相邻选择器;
(5)子选择器;
(6)后代选择器;
(7)通配符选择器;
(8)属性选择器;
(9)伪类选择器;
根据以上“选择器在浏览器的解析原理”以及“各种选择器的匹配效率”,如果我们想要更好地使用高性能的选择器,需要注意以下4个技巧:
1、不要使用通配符
在选择器中,通配符一般用于选取页面中所有元素。例如“{}”表示选取页面所有元素,“#wrapper *{}”表示选取id为wrapper元素下面的所有子元素。
通配符的匹配量非常大,一般情况下不建议使用。当然,从上面的css选择器匹配效率排序也可以看出来通配符的效率非常低。
2、不要在id选择器以及class选择器前添加元素名
元素的id在一个页面中具有唯一性的,因此在id选择器前添加元素名是多余的,同时也增加匹配量。
元素的class不具有唯一性,如果在class选择器前添加元素名,则表示选择某一个class的某一种元素。除非是迫不得已的情况,否则尽量不要使用“class选择器前添加元素名”这种方式。
举例:
css 代码

/*多余的写法*/
div#wrapper {
    font-size: 12px;
}
/*正确的写法*/
#wrapper {
    font-size: 12px;
}

3、选择器最好不要超过3层,位置靠右的选择条件尽可能精确
选择器的层级越多,浏览器解析时匹配的次数就越多,因而速度就越慢。因此在定义选择器时,我们要尽量让选择器的层级少一些,最好不要超过3层。此外根据选择器在浏览器的从右到左的解析原理可知,位置靠右的选择条件越精确,匹配量就越少,速度就越快。
4、避免使用后代选择器,尽量少用子选择器
后代选择器匹配量比较大,应该避免使用。如果非要用的话,建议使用子选择器代替。但是子选择器匹配量也不小,如果有其他选择器如id选择器或class选择器等代替,也尽量少用子选择器。不过我们要注意一下,尽量少用不等于不用,不要为了减少子选择器的使用而增加过多的id和class,以至于id和class泛滥成灾。
【疑问】:
1、现在浏览器解析速度那么快,为什么还要纠结选择器那一点点的性能提升呢?
之前已经明确说过了,对于小项目来说,这的确没多大影响。但是对于一个大型项目特别是访问量每天达几百万次的网站来说,哪怕是一点点的性能提升也是非常重要的。当然,就算是做小项目,写一手优雅的代码是高手们的一种良好习惯。因为高手也讲究“诗意的栖居”。
当然对于小项目来说,我们还是在确保CSS的可读性和可维护性的前提下,再去考虑高性能的选择器。

前端开发资料下载|vue前端开发|web前端开发是ui设计吗

» 本文来自:前端开发者 » 《wed前端开发中高性能的选择器》
» 本文链接地址:https://www.rokub.com/4111.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!