Какой выбор 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% быстрее.Если их все можно объединить в один селектор, это будет в несколько раз быстрее.