jQuery 性能：分组选择器与单个选择器答案

【问题标题】：jQuery performance: grouped selectors vs individualjQuery 性能：分组选择器与单个选择器
【发布时间】：2013-06-20 03:10:18
【问题描述】：

取以下html：

<div class='div1'/>
<div class='div2'/>
<div class='div3'/>

现在假设我想使用 jQuery .hide() 隐藏这些元素。在性能方面，将 3 分组为单个选择器会更好。

$('.div1, .div2, .div3').hide();

或者运行 3 个单独的选择器。

$('.div1').hide();
$('.div2').hide();
$('.div3').hide();

为了代码的可读性，我更喜欢第二种方法，但我怀疑前一种方法更快？

此外，选择的类型是否会影响此处的结果。例如使用类标记名和 id 混合进行分组选择？

$('.myClass, a, #myId').hide();

vs 单独的选择器。

$('.myClass').hide();
$('a').hide();
$('#myId').hide();

【问题讨论】：

“性能是否更好......” - 你test that吗？
@MosheKatz 他在问一个问题。他不是在陈述一个事实。强调“性能方面是不是更好......”..他没有说“性能方面它是更好......”..抱歉吹毛求疵：P
我不知道怎么做，直到现在..我会运行一些测试
看起来$('div[class^=div]').hide() 将是这组对象的最快选择器。
@Ohgodwhy 这个选择器比其他两个选择器表现更差jsperf.com/single-vs-grouped-jquery-selectors

【解决方案1】：

将 3 个组合成一个选择器会更好？

它们之间的唯一区别是一个比另一个更具可读性（您已经喜欢），您可以根据自己的选择使用任何人，因为它们在performance 中没有太大区别-

选择的类型会影响这里的结果吗？

不，这对结果没有任何影响 -

【讨论】：

"选择的类型会影响这里的结果吗？" - 单独使用时确实如此 - 单独使用 #idSelector 将使用 getElementById 进行查询，而其余部分由 Sizzle 处理。 core.js#L129
@FabrícioMatté 那会影响结果吗？
我刚刚运行了相同的测试，结果大致相似（在 Windows 8 64 位上测试 Chrome 27.0.1453.116 32 位）。在我的案例中，分组慢了 20%。
嗯，不同之处在于最小的性能提升，就像添加一个小注释一样。 =]
@QF_Developer 只需多次重新运行测试，您肯定会看到不同的结果。

【解决方案2】：

Here's the benchmarks

看起来分组稍微快一点。

Mixed Individual: 8ms
Mixed Grouped: 6ms
Individual: 15ms
Grouped: 9ms

【讨论】：

【解决方案3】：

这是你的答案：

谷歌搜索“jsperf Jquery 选择器性能”会产生许多不同的测试用例，涵盖各种性能运行。

一般来说，Jquery 选择器必须被拆分成单独的组件进行处理。因此，当它们都在一个选择器中时，这会导致成本略有增加。

除非您遇到性能问题，否则不必担心这一点。注重可读性。

【讨论】：