css - .something :first-child as a selector? 的性能

Question

下面的选择器是否可能存在性能问题？

.div-class :first-child {
  margin-top: 20px;
}

我读到在另一个选择器中使用 * 选择器很慢。大概上面的内容实际上与此相同？

.div-class *:first-child {
  margin-top: 20px;
}

这是针对我认为会夸大任何问题的移动网站。

更新 - 我想我一直不清楚我在问什么。我想知道这些选择器是否对性能不利？

Answer 1

是的，它们在功能上是等价的。添加 * 字符本身的成本应该几乎为零，因为您只是明确指定了无论如何都隐含的内容。

至于 *:first-child 是否慢，没有确定的答案——它不仅取决于你的布局，而且在很大程度上取决于你无法控制的外部因素，包括两者硬件功能和浏览器实现。您最好的选择是尽可能运行您自己的基准测试。

就我个人而言，我会避免担心它，直到我确定它是瓶颈发生的地方。

我可以建议(但不保证它会有所帮助)的一件事是，如果 .div-class 只会有一个级别的后代，您可以用直接后代替换后代组合器组合器:

.div-class > :first-child {
  margin-top: 20px;
}

这限制了对直接祖先的查找，因此浏览器只需要决定每个第一个 child 的父级是否是 .div-class，而不必继续查找更多的祖先。这将有助于处理完全位于任何 .div-class 层次结构之外的元素。

同样，这假设了后代和子组合子的简单实现，所以我不能保证它真的会提高渲染性能。但是，根据您的布局，它可能值得一试。