JQuery цепочки быстрее, чем отдельные операторы?

Question

Быстрее писать отдельные вызовы функции jQuery или использовать одну цепочку?Если добавить объяснение того, почему один из них быстрее другого, он будет очень признателен: -)

Пример:

$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

быстрее / медленнее, чем

$('#blah_id').niftyjQueryMethod1();
$('#blah_id').niftyjQueryMethod2();

Answer 1

В вашем примере цепочка выполняется быстрее.

// Example 1
$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

// Example 2
$('#blah_id').niftyjQueryMethod1();
$('#blah_id').niftyjQueryMethod2();

В примере 1 вызов для создания объекта jQuery ($('#blah_id')) выполняется только один раз.В примере 2 это сделано дважды.Это означает, что второй вызов будет медленнее.

Если вы не хотите помещать их все в цепочку, вы можете кэшировать выборку в переменной:

var blah = $('#blah_id');
blah.niftyjQueryMethod1();
blah.niftyjQueryMethod2();

Предполагая, чтометоды не влияют на то, какие элементы присутствуют в выделении выбора (например, parent, find или filter do), это будет в значительной степени точно так же, как в примере 1.

Answer 2

Это:

$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

Вероятно, быстрее, чем это:

$('#blah_id').niftyjQueryMethod1(); $('#blah_id').niftyjQueryMethod2();

Но не из-за цепочки. Это потому, что поиск селектора обходится дорого.

Это:

var $blah = $('#blah_id');
$blah.niftyjQueryMethod1();
$blah.niftyjQueryMethod2();

, вероятно, не имеет заметного различия в скорости по сравнению с первым примером.

Answer 3

Да, цепочка быстрее, потому что найденный DOMElement (через $('#blah_id')) передается только напрямую из функции функции в функцию.

Если вы разделите их, DOMElement должен быть найден снова и снова и снова. Каждый $("selector") является злом. Старайтесь избегать их как можно чаще.

Вы даже можете установить ссылки на ранее найденные объекты:

var myElement = $('#blah_id');

myElement.doSomething();

Answer 4

Первый быстрее.Во втором селекторе создается объект jQuery дважды.Если бы $('#blah_id') был кэширован и сохранен как переменная var $blah = $('#blah_id'), а затем использовался во втором селекторе как $ blah, а не $('#blah_id'), тогда это не имело бы никакого значения.