使用 ":not" 和 ".not()" 选择器之间的性能差异？

Posted 2023-03-06

【中文标题】使用 ":not" 和 ".not()" 选择器之间的性能差异？

【英文标题】：Performance differences between using ":not" and ".not()" selectors?

【发布时间】：2012-02-09 09:00:44

【问题描述】：

以下两行之间是否存在任何速度/效率差异。

$("table td:not(:first-child)")

和

$("table td").not(":first-child")

我认为第一个会更好，因为它会删除对象，但是是否存在实际差异并且是否很大。

谢谢

【问题讨论】：

jsperf.com/jquery-css3-not-vs-not

这可能是我的更多问题，我不确定如何准确测量它。我会假设较小的页面没有问题，但它在什么时候会有所不同？

在可读性方面存在明显的差异。您的申请中是否存在其他类型的差异？

我同意我真的很喜欢可读性，但我想确保我不会因为可读性而失去显着的性能。

我发现第二个更容易阅读，所以如果我发现特定页面上的性能问题，我会从这种方式开始并重新审视它。

【参考方案1】：

取决于浏览器。

支持querySelectorAll 的浏览器将获得性能提升...

$("table td:not(:first-child)")

...因为它是一个有效的选择器。旧版浏览器（IE7 及更低版本） 不会。

您需要小心:not() 选择器。 jQuery (Sizzle) 使用非标准选择器对其进行了扩展，因此很容易破坏 qSA。

【参考方案2】：

从jsperf 测试中可以看出，:not 的平均速度大约是两倍。总体而言，尽管此性能可能只占您整体执行时间的一小部分。

jquery 文档状态：

.not() 方法最终将为您提供更具可读性 选择而不是将复杂的选择器或变量推入 :not() 选择器过滤器。在大多数情况下，这是一个更好的选择。

因此，您实际上可以决定您获得的几分之一秒是否超过可读性。

【讨论】：

另外，可读性也有点个人化。我真的对 :not 的可读性没有问题。特别是与我看到的程序员所做的其他事情相比，可读性要差得多。

我在上面的 jsperf 链接中收到“内部服务器错误”。也许是different revision？