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

Question

我在几页上运行了Google Page Speed Firefox扩展程序，在“高效的CSS选择器”下，它列出了我的CSS中效率低下的各种内容。

但是有些消息看起来有点神秘 - 这些（粗体）意味着什么：

  

div＃menu h3.soon small
  标记密钥，包含2个后代选择器和ID过度限定标记和类别过度限定标记

     

table.data tr：nth-​​child（2n）td
  标记密钥，包含2个后代选择器和Class过度限定标记

     

table.data tr.disabled td
  使用2个后代选择器标记密钥，使用标记严格限定类，使用标记过度限定类

我认为他们认为后代选择器很糟糕，但也有很多“过度合格”。我可能不会过多努力修复所有这些（有很多），但知道谷歌在这里的含义会很棒！

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元素的所有实例，以防止所有可能的祖先。多个后代加剧了性能损失。

也就是说，优化选择器（在大多数情况下）实现的性能提升可以忽略不计。

Answer 3

这是说没有理由使用标签，因为你给了一个类，所以你已经限制了它，它必须做额外的搜索。

例如：

div#menu h3.soon .small

这里没有理由以div开头，因为你只会在带有id菜单的html元素下面的h3标签中看到类中的小类。

他们建议这样的事情

#menu .soon .small {...}

甚至

#menu {...}

.soon {...}

.small {...}