Google Page Speed - 这些消息是什么意思？

Question

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

但有些消息似乎有点神秘——这些（粗体）是什么意思：

div#menu h3.soon 小
带有 2 个后代选择器的标签键，ID 与标签过度限定，Class 与标签过度限定

表.data tr:nth-child(2n) td
带有 2 个后代选择器的标签键和带有标签的过度限定类

table.data tr.disabled td
带有 2 个后代选择器的标签键和使用标签过度限定的类以及使用标签过度限定的类

我假设他们认为后代选择器很糟糕，但也有很多“过度限定”。我可能不会花太多精力来修复所有这些问题（有很多），但很高兴知道 Google 在这里的实际含义！

Answer 1

首先，我从未使用过 Page Speed，但如果您花点时间阅读一下，该消息并不那么神秘。

div#menu h3.soon 小

带有 2 个后代选择器的标签键和过度限定的 ID
标签和类过度限定
标签

带有 2 个后代选择器的标签键： 您有多少个小标签没有包含在另一个带有 class 的标签中？没有任何？在这种情况下，CSS 嵌套是完全没有必要的。

ID 与标签过度限定： #menu 不需要在前面加上 div。
您很可能在带有 id 菜单的标记中没有任何其他标签（您不应该，它是一个 ID！），因此在菜单前面添加 div 是多余的。

类过度限定标签： .soon 不需要在前面加上 h3。
除了 h3 标签之外，您的标记中很可能没有任何其他带有 class Soon 的标签，因此无需在 .soon 前面添加 h3 。

其他消息也类似。

-史蒂芬

Answer 2

斯蒂芬说得好。

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

不需要在 ID 前面添加元素（如 div#content 中），因为浏览器在到达“div”时已经匹配了选择器。但浏览器仍然被迫对其进行评估。

后代选择器的成本很高，因为浏览器必须根据所有可能的祖先检查最右边的简单选择器中引用的 dom 元素的所有实例。多个后代会加剧性能损失。

也就是说，通过优化选择器（在大多数情况下）获得的性能增益可以忽略不计。

Answer 3

这意味着没有理由使用该标签，因为您给出了一个类，所以您已经限制了它，并且它必须进行额外的搜索。

例如：

div#menu h3.soon .small

这里没有理由以 div 开头，因为您很快只会在带有 id menu 的 html 元素下面的 h3 标签中查看 class Small 。

他们正在建议这样的事情

#menu .soon .small {...}

，甚至

#menu {...}

.soon {...}

.small {...}