高效CSS选择器

Question

我知道我们应该避免使用CSS后代选择器，但我只是想知道这两种选择中哪一种更有效，为什么呢？

#myDiv .childDiv .grandchildAnchor span

或

#myDiv > .childDiv > .grandchildAnchor > span  

您可以假设两者对我的标记都是有效的。我该如何测试这类事情。是否有一个在线平台，我可以写两个版本的我的代码，它将为我带来效率的结果。

编辑:我想学习这些东西。

• 如果有两个CSS选择器，我怎么知道哪一个工作更快。只是为了知识。
• 在线平台，我可以测试两个选择器的渲染。

Answer 1

有性能测试器

https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger

使用实例

http://www.html5rocks.com/en/tutorials/speed/css-paint-times/

Answer 2

如果您正在计划您的CSS选择器，围绕哪个选择器更有效，那么您将注意力集中在错误的问题上。

不要大头不算小头算。

要以任何有意义的方式减缓浏览器的速度，需要绝对大量的HTML和CSS，因此，与其关注哪个选择器更有效，不如关注哪个选择器是合适的。通过压缩图像、缩小CSS和JS，或者简单地从页面中删除单个图像，您将节省更多的性能。

在您的示例中，两个选择器都不是适当的，也不是有效的。除非您有很好的理由嵌套选择，否则您的CSS应该优化为：

//specificity 0-0-1-0
.some-span-type {
    ...
}

您可能需要检查span是否位于特定类型的容器中，在这种情况下，您可能需要使用：

//specificity 0-0-2-0
.some-container .some-span-type {
    ...
}

还可能需要检查span是否位于唯一容器中，在这种情况下，您可能需要使用：

//specificity 0-1-1-0
#some-container .some-span-type {
    ...
}

问题是，一旦您开始使用两个或三个选择器添加更多的样式，您将很快发现需要三、四或五个选择器来对后续元素进行样式化，以正确地覆盖现有样式。

Answer 3

根据Mozilla的说法，有一个明确的答案：避免了后代选择器。

子代选择器是CSS中最昂贵的选择器。这是可怕的昂贵-特别是如果选择是在标签或通用类别。 通常，真正需要的是子选择器。例如，性能非常差，因此在Firefox的用户界面CSS中禁止后裔选择器，而没有具体的理由。在你的网页上做同样的事情是个好主意 BAD 树头树(…)} 更好，但仍然是糟糕的(参见下一指南) 树头>树干>树干{…}

您可以在以下网址找到上面的引号和更多信息：CSS