哪个jQuery选择更有效？

Question

哪种选择器效率更高？

1

$('#parent_element span.class1').do_something1();
$('#parent_element span.class2').do_something2();
$('#parent_element span.class3').do_something3();
$('#parent_element span.class4').do_something4();

2

$parent_element = $('#parent_element'); 
$parent_element.find('span.class1').do_something1();
$parent_element.find('span.class2').do_something2();
$parent_element.find('span.class3').do_something3();
$parent_element.find('span.class4').do_something4();

我的猜测是＃2更有效，因为它开始搜索find()，专注于父元素与整个DOM。这是真的吗？

如果是这样，需要多少次调用该父元素才能使其比＃1更有效？

谢谢！

Answer 1

解决方案＃2的效率要高得多。在jQuery中缓存选择器是减少选择所需时间的最佳方法之一。对于任何大于1的用途，请使用解决方案2.

Answer 2

与此类似，如果你想要真正的答案，你必须使用像jsperf这样的工具进行测试。测试显示第二个比第一个快得多。

如果它们都是相同的方法调用，或者您可以使用.each(fn)方法处理每个方法，您可以将它们全部组合在一起，并且选择器操作会明显加快：< / p>

$('#parent_element').find('span.class1, span.class2, span.class3, span.class4').each(fn);

您可以在此处自行运行：http://jsperf.com/selector-options。你的第一个选择是橙色。你的第二个选择是蓝色。组合选择器是红色的。缓存的父级快约30-80％。如果它们都可以组合成一个选择器，那么它的速度要快很多倍。