Existe uma diferença de desempenho entre seletor de jQuery ou uma variável

Question

Ultimamente, tenho me perguntado se há uma diferença de desempenho entre repetir o seletor repetidamente ou apenas usar um VAR e armazenar o seletor nisso e apenas me referir a ele.

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

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

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

ou apenas

var Object = $('#Element');

Object.dothis();

Object.dothat();

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

Eu prefiro a segunda maneira porque parece mais limpa e é melhor sustentável.

Answer 1

Certamente há uma diferença de desempenho, uma vez que Sizzle não precisa ser executado a cada vez, no entanto, também há uma diferença de funcionalidade. Se o DOM mudar entre as chamadas 1 e 3, o objeto JQuery em cache ainda conterá o conjunto antigo de elementos. Isso geralmente pode ocorrer se você armazenar um conjunto e depois usá -lo em um retorno de chamada.

Answer 2

Eu prefiro a segunda maneira. Será mais fácil de manter o código mesmo se um ID de elemento ou classe mudar.

Answer 3

Há outra maneira rápida. É tão rápido quanto seu segundo código.

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

Answer 4

gastando no método de Ghommey

var Object = $('#Element');

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

Mais rápido e armazena o objeto para uso posterior.

Answer 5

A segunda maneira tem um benefício de desempenho. Pode ou não ser ótimo, mas é melhor. Na primeira versão, você está fazendo Dom Traversal 4 vezes, no segundo que você faz apenas 2.

Muito bom artigo sobre acelerar o jQuery aqui: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-innstantal-inncrease-your-jquery-performance/

Answer 6

Armazenar os resultados de sua seleção de jQuery para uma variável é mais rápida. Isso ocorre porque o jQuery não precisa procurar os resultados toda vez que você tenta acessá -los.

Eu montei algumas métricas de desempenho: http://jsperf.com/jquery-selectors-vs-stored-variable

No Chrome 26.0.1410.63 no Mac OS X 10.8.2:
Selecionando: 40.276 OPS/s
Armazenando a variável: 594.031.358 OPS/s