css - * 到底有多慢？

Question

每个人都说，* { ... }选择器非常慢。但它到底有多慢？

我总是尽量避免它，但有时它非常有用。例如：* + h1 { margin-top 1em; }

Answer 1

简单地说：通用选择器*的速度与页面上的元素一样慢。

由于从右到左匹配的浏览器获取每个元素并将其与所有候选规则匹配，因此每个元素都会匹配*得很好。它本身不会损害性能，但是如果您的页面中有很多元素或非常复杂的 DOM，那么据称它会变得很慢，但即便如此它也不会明显降低浏览器的性能。

例如，即使是类似的东西* + h1也是合理的，因为如果您想考虑匹配性能，那么从右到左匹配的浏览器将h1首先仅在元素上测试该选择器，然后再检查是否有任何元素出现在它们之前（真的不需要太多努力，因为*基本上是有保证的匹配）。

您可能还希望查看我对类似问题的回答* + *（即两个通用选择器！）。