使用 jQuery 提高选择器的性能答案

【问题标题】：Improve selectors performance with jQuery使用 jQuery 提高选择器的性能
【发布时间】：2013-06-13 12:36:56
【问题描述】：

我一直在查看一些网站，他们都在谈论使用标签选择器而不是类来提高性能。

例如，这个：

$("input.myclass");

而不是这个：

$(".myclass");

例如：

他们都声称 JavaScript 只有 getElementById 和 getElementsbyTagName 而没有直接选择类的方法。

这在过去 3 年中是否发生了变化？他们现在可以按班级选择吗？我正在用 jsperf 对其进行测试，似乎类选择器到目前为止更快： http://jsperf.com/class-vs-input

我还查看了其他人的测试并显示了相同的结果：http://jsperf.com/selectors-perf/3

这在去年发生了变化吗？我们现在应该按类而不是标签来选择吗？在哪里可以查看原生实现类选择器的浏览器版本？

谢谢。

【问题讨论】：

你的第一个 jsperf 完全不相关。这些选择器根本没有可比性。您应该使用的选择器是$(".demo") 和$("input.demo")。 :checkbox 是一个 jQuery 伪选择器，效率不高。如果有的话，你应该使用[type="checkbox"]。除了效率之外，我认为这样做时要考虑的重要一点是，有时您不想要某个类的所有元素，您只想要满足特定条件的那些元素（例如在div)
如果你认为input.class 比.class 好，我想你一定要看看这个。jsperf.com/jquery-standards-over-qualified-selectors/2 请注意搜索是从右到左完成的，所以你会只有当你同时使用input 和.class 时才算过分 :)
@passionateCoder 我不认为更快，我想问这在过去几年是否发生了变化，因为过去人们的说法正好相反。
@Ian 感谢您提供的信息，但是与标签选择器中的类相比，与我发布的链接相反，类选择器仍然更快？
@Steve 不，我明白，我只是想指出第一个 jsperf 并不完全“公平”。您的第二个 jsperf（和其他评论者的 jsperf）更有意义，并且绝对显示简单的选择器更快。我认为在过去的几年里，Sizzle（jQuery 有时使用的选择器“引擎”）的使用已经下降，有利于原生 DOM 方法。 Sizzle 有点低效（但非常可靠和一致），因此它可能更适合在旧浏览器中进行搜索，而且 .test 和 input.test 之间不会有这样的差异

标签： javascript jquery performance query-performance

【解决方案1】：

现在变了。

大多数浏览器都在实现：

var matches = document.body.querySelectorAll('div.highlighted > p');

在他们的 javascript 实现中。

这就是 jQuery 现在在里面使用的东西；它正在实现 sizzle.js，一个选择器 js 库，用于选择是使用 querySelector 还是常规的 getElementsByTagName 函数；

例如对于jquery的构造函数$() 如果第一个参数是一个字符串：$(iAmAString)，那么如果字符串的第一个字母是#，jquery 将调用document.getElementById(iAmAString.substr(0))。如果不是，它会根据浏览器的兼容性和字符串的复杂程度，让 sizzle 处理是否调用 querySelector。

还有很多其他很棒的东西。

在选择元素时做到最精确，使用基本函数并缓存您经常使用的选择器，将减少通过这条大链时的检查次数，甚至绕过整个链。

对于某些网站，这具有产生令人敬畏的独角兽骑乘小猫效果的特殊效果，还有什么要说的：

兼容性支持在这里 https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll

【讨论】：