Gibt es einen Leistungsunterschied zwischen einem jQuery-Selektor oder einer Variable?

Question

In letzter Zeit habe ich mich gefragt, ob es einen Leistungsunterschied zwischen dem wiederholten Wiederholen des Selektors immer wieder gibt oder ob es nur einen Var gibt und den Selektor darin speichert und sich nur darauf bezieht.

$('#Element').dothis();

$('#Element').dothat();

$('#Element').find('a').dothat();

oder einfach nur

var Object = $('#Element');

Object.dothis();

Object.dothat();

$('a', Object).dothat();

Ich bevorzuge die zweite Methode, weil sie sauberer aussieht und besser wartbar ist.

Answer 1

Es gibt sicherlich einen Leistungsunterschied, da Sizzle nicht jedes Mal ausgeführt werden muss, aber es gibt auch einen Unterschied in der Funktionalität. Wenn sich der DOM zwischen dem 1. und 3. Aufruf ändert, enthält das zwischengespeicherte jQuery-Objekt immer noch den alten Satz von Elementen. Dies kann oft passieren, wenn Sie eine Menge zwischenspeichern und sie dann in einem Rückruf verwenden.

Answer 2

Ich ziehe den zweiten Weg vor. Es wird einfacher sein, den Code zu pflegen, auch wenn sich eine Element-ID oder Klasse ändert.

Answer 3

Es gibt einen weiteren schnellen Weg. Es ist genauso schnell wie dein zweiter Code.

$('#Element')
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Answer 4

Erweiterung der Methode von Ghommey

var Object = $('#Element');

Object
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Schneller und speichert das Objekt für späteren Gebrauch.

Answer 5

Der zweite Weg hat einen Leistungsvorteil. Es mag großartig sein oder auch nicht, aber es ist besser. In der ersten Version führen Sie 4-mal eine DOM-Traversierung durch, in der zweiten nur 2-mal.

Ziemlich guter Artikel zur Beschleunigung von jQuery hier: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/