Rendimiento de los selectores de jQuery frente a las variables locales

Question

¿Se recomienda que, cuando necesito acceder al resultado de un selector de jQuery más de una vez en el alcance de una función, ejecuto el selector una vez y lo asigno a una variable local?

Perdona mi ejemplo trillado aquí, pero creo que ilustra la pregunta. Por lo tanto, este código se realice más rápido:

var execute = function(){ 
    var element = $('.myElement'); 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

de este código:

var execute = function(){ 
    $('.myElement').css('color','green'); 
    $('.myElement').attr('title','My Element'); 
    $('.myElement').click(function(){ 
     console.log('clicked'); 
    }); 
} 

Si no hay diferencia, ¿Puede alguien explicar por qué? ¿JQuery guarda en caché los elementos después de seleccionarlos para que los selectores posteriores no tengan que molestarse en buscar el dom nuevamente?

Answer 1

Reutilizando la referencia de selección, el primer caso, es definitivamente más rápido. Aquí está una prueba que hice como prueba:

http://jsperf.com/caching-jquery-selectors

El último caso, la redefinición de los selectores, se reporta como ~ 35% más lento.

Answer 2

Almacenar la referencia en una variable local será más rápido que ejecutar el código de selección cada vez. Es simplemente una cuestión de no tener que ejecutar CUALQUIER código para encontrar el elemento apropiado cuando lo almacena en una variable. Mi regla de oro es almacenar los resultados de la búsqueda jQuery en una variable si voy a usarlo más de una vez.

Answer 3

Otra opción es utilizar un each en vez de repetir el selector, y que está asociado el trabajo, una y otra vez

var execute = function(){ 
    $('.myElement').each(function() { 
     var elem = $(this); 
     elem.css('color','green'); 
     elem.attr('title','My Element'); 
     elem.click(function(){ 
     console.log('clicked'); 
     }); 
    }); 
} 

Answer 4

No se olvide de éste:

var execute = function(){ 
    $('.myElement') 
     .css('color','green') 
     .attr('title','My Element') 
     .click(function(){ 
      console.log('clicked'); 
     }); 
} 

Answer 5

En realidad estás olvidando el verdadero enfoque en caché.

Lo que ocurre con jQuery es que la búsqueda inicial: $('.selector') es costosa. Pero después de eso, encadenar tus acciones en él o asignarlo a una variable y ejecutar tus acciones sobre la variable no importa demasiado. La ganancia de rendimiento principal que puede obtener es almacenar en caché el elemento aún más, y no asignar el selector jQuery a cada iteración de su llamada de función.

var element = $('.myElement'); 
var execute = function(){ 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

Este enfoque es casi dos veces más rápido que la versión más rápida de los otros enfoques sugeridos.

Ver http://jsperf.com/caching-jquery-selectors/17

Nota: Si cambia de DOM durante su vida útil, se puede actualizar la variable con el element una selección fresca de elementos.