CSS 选择器对性能有很大影响吗？答案

【问题标题】：Are CSS selectors a big performance hit?CSS 选择器对性能有很大影响吗？
【发布时间】：2011-02-01 14:15:28
【问题描述】：

我有一个包含大量 HTML 代码的 Web 应用程序。有一些我无法摆脱的样式属性，但我想知道是否值得摆脱类名并改用 CSS 选择器。 CSS 选择器执行缓慢吗？

我说的是用更复杂的选择器（例如 #example div > div:nth-child(3) > p

）替换类名选择器（例如 .example）

【问题讨论】：

你能说得更具体一点，举个例子吗？我的意思是，当您将类名放在元素上并从 CSS 文件中引用它们时，这也是一个“选择器”。实际上，仅按类引用是您可以做的较慢的事情之一。但是，如果没有示例，您的问题确实没有多大意义。

【解决方案1】：

查看this article 以查看关于此的图表。我不知道这个基准有多精确，但似乎子选择器确实更慢，但你不会通过避免子选择器找到任何明显的收益。这是一个微优化，所有的“收益递减”都写了在它上面。

【讨论】：

【解决方案2】：

对性能的影响很小。

【讨论】：

【解决方案3】：

您可以在此处找到一篇有趣的博客文章，其中包含 CSS 选择器在大多数常见浏览器上的性能示例和测试：

这是作者的结论：

根据这些测试，我有以下假设：对于大多数网络网站，可能的性能提升从优化 CSS 选择器将是小，不值得付出代价。有一些类型的 CSS 规则和与 JavaScript 的交互可以使页面明显变慢。这是焦点应该在哪里。

【讨论】：

【解决方案4】：

浏览器从从右到左匹配，任何非特定标签都会导致更多的性能损失。*

1–较慢：

.foo p

2-更快

.foo p.bar

在第一个示例中发生的情况是，浏览器匹配所有段落，然后将其缩小到其祖先具有 foo 类的那些。

在第二个示例中，浏览器匹配所有具有bar 类的元素，然后匹配作为段落的子集，然后匹配其祖先具有foo 类的子集。

人们通常会期望第二个示例的初始集小于第一个示例的初始集。

*请记住，只有在非常大（megs）和/或有很多很多元素（例如，数百个spans 或div s)。只有少量元素的小页面不会看到真正的（如果有的话）性能下降，即使 CSS 编写得不好。

【讨论】：