伪类和自定义选择器的相对性能是啥？

Posted 2023-05-08

【中文标题】伪类和自定义选择器的相对性能是啥？

【英文标题】：What is the Relative Performance of Pseudo-Class and Custom Selectors?伪类和自定义选择器的相对性能是什么？

【发布时间】：2011-02-08 19:22:28

【问题描述】：

据我了解，就选择器速度而言，#ID 选择器最快，其次是元素选择器，然后是 .class 选择器。

我一直认为伪类选择器和自定义选择器（':selector' 形式的选择器）类似于 .class 选择器，但我意识到我只是不确定。

我意识到这确实取决于伪类/自定义选择器中代码的复杂性，所以我想我想知道排除这个因素的答案。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

我无法想象有任何代码会减慢您考虑优化 选择器...

我原以为插件编写者的目标是尽可能优化代码 - 他们不能保证使用他们的代码的页面高效且结构良好。在这种情况下，任何拥有可怕 html 的人都会责怪插件。无论如何，我真的不想就优化选择器的优点进行辩论。随意开始一个新问题，我很乐意在那里回复。

好吧，#ID 是有意义的，因为它们应该是唯一的；但是，我还没有测量到任何统计上显着的性能差异（此外，像 jQuery 这样的框架会智能地缓存选择器查找）。

@Adam：它正在评估 jQuery 库（或特别是 Sizzle 引擎）完成大量工作的选择器。因此，了解哪种选择器速度快对于插件的可扩展性至关重要。

@Guffa：在我（真正的主题，如果你能证明我错了，请，这样做）意见，大部分处理时间都花在操作一次元素上被选中。还是？

【参考方案1】：

这一切都归结为 Sizzle 引擎（jQuery 用来评估选择器）可以使用 DOM 中的哪些方法来查找元素。

它可以使用getElementById和getElementsByTagName方法快速获取特定id和特定标签名称的元素。之后，它只需遍历所有找到的元素，并将每个元素与选择器创建的条件进行比较。

DOM 中的方法可以在任何元素上使用，并且可以组合使用，因此例如在具有特定 id 的元素中查找所有 div 元素非常快。