6

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

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

div#menu h3.soon 小
标签键，带有 2 个后代选择器和 ID 过度使用标签和 Class 过度使用标签

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

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

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

4

3 回答 3

12

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

div#menu h3.soon 小

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

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

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

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

其他消息类似。

-斯蒂芬

于 2009-11-25T22:06:56.680 回答
5

斯蒂芬说得很好。

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

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

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

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

于 2009-11-25T22:23:05.870 回答
1

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

例如：

div#menu h3.soon .small

这里没有理由从 div 开始，因为您很快就会在带有 id 菜单的 html 元素下方的 h3 标记中查看 class small in class。

他们正在建议这样的事情

#menu .soon .small {...}

甚至

#menu {...}

.soon {...}

.small {...}
于 2009-11-25T21:46:14.820 回答