什么是CSS中非常低效的规则

Question

我在谷歌上进行了速度测试,我的CSS得分很高,成绩也很差.糟糕的成绩是由于CSS效率低下造成的.那是什么？我该如何纠正呢？

Very inefficient rules (good to fix on any page):
#menu ul ul li:first-child a:after    Tag key with 4 descendant selectors
#menu ul ul li:first-child a:hover:after    Tag key with 4 descendant selectors

Answer 1

浏览器从右到左解析CSS-Selectors.因此,如果你的后代选择器较少,那么CSS的解析速度会更快.

后代选择器是低效的,因为对于与键匹配的每个元素,浏览器还必须遍历DOM树,评估每个祖先元素,直到找到匹配或到达根元素.密钥越不具体,需要评估的节点数就越多.

使用高效的CSS选择器

有关:

优化CSS对谷歌的网页速度让我感到困惑

为什么浏览器从右到左匹配CSS选择器？