哪个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)方法中处理每个方法，则可以像这样将它们全部组合在一起，并且选择器操作会明显更快：

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

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