Google Page Speed - 这些消息意味着什么？

Question

我在几页上运行了Google Page Speed Firefox扩展,在"高效的CSS选择器"下,它列出了我的CSS中效率低下的各种内容.

但是有些消息看起来有点神秘 - 这些(粗体)是什么意思:

div#menu h3.soon small
标签密钥,带有2个后代选择器,ID过度限定标签和Class过度限定标签

table.data tr:nth-​​child(2n)td
具有2个后代选择器的Tag键和使用标签过度限定的类

table.data tr.disabled td 标记密钥,带有2个后代选择器和Class overly
qualified with tag和Class overly qualified with tag

我假设他们认为后代选择器是坏的,但也有很多"过度合格".我可能不会过多地努力修复所有这些(有很多)但是知道谷歌在这里意味着什么会很好!

Answer 1

首先,我从未使用过Page Speed,但是如果你花一点时间阅读它,那么这个消息就不那么神秘了.

div#menu h3.soon small

带有2个后代选择器的标记键和标记过度限定的ID以及使用标记过度限定的类

带有2个后代选择器的标记键:你有多少个小标签,它们不会很快包含在另一个标签中？没有？在这种情况下,CSS嵌套完全没有必要.

标签过度限定ID: #menu不需要预先添加div.你很可能在你的标记中没有任何其他标签的id菜单(你不应该,它是一个ID!),所以在div冗余的前面添加菜单.

使用标记过度限定的类: .soon不需要在h3前面添加.您很可能在标记中没有任何其他标记,而不是h3标记,因此不需要使用h3预先添加.soon.

其他消息也类似.

-Stephen

Answer 2

斯蒂芬说得很好.

他们标记你的选择器的原因是CSS规则从右到左匹配.

不需要在元素前面添加ID(如在div#内容中),因为浏览器在到达"div"时已经匹配了选择器.但浏览器仍被迫对其进行评估.

后代选择器很昂贵,因为浏览器必须检查最右边的简单选择器中引用的dom元素的所有实例,以防止所有可能的祖先.多个后代加剧了性能损失.

也就是说,优化选择器(在大多数情况下)实现的性能提升可以忽略不计.