¿Hacer referencia a un selector es más rápido en jquery que llamar realmente al selector? si es así, ¿cuánto hace la diferencia?

Question

$(preview-button).click(...) 
$(preview-button).slide(...) 
$(preview-button).whatever(...) 

¿Es una mejor práctica para hacer esto:

var preview-button = $(preview-button); 
preview-button.click(...); 
preview-button.click(...); 
preview-button).slide(...); 
preview-button.whatever(...); 

Probablemente sería mejor la práctica de hacer esto por el bien de mantener el código limpio y modular, pero ¿tiene una actuación diferencia sabia? ¿Uno tarda más en procesar que el otro? Gracias chicos.

Answer 1

Sí lo hace, cuando usa el selector sin almacenarlo en una variable jQuery necesita analizar el DOM CADA VEZ.

Si tuviera algo así como $(".class") jQuery necesitaría encontrar los elementos con esa clase cada vez que la usa, pero si está almacenada en una variable, utiliza el identificador único en la variable. No hay necesidad de buscar.

Así que sí, recomiendo totalmente almacenarlo en una variable.

ACTUALIZACIÓN: Cadena añadida como alternativa.

Si sólo utiliza el selector en un mismo lugar también se puede hacer encadenamiento lo que significa que se agrega un método tras otro con la misma notación de puntos así:

$(".class") 
     .click(function(){ ... }) 
     .mouseenter(function(){ ... }) 
     .css(...); 

Answer 2

Sí. También podría encadenar que:

$(preview-button) 
    .click(...) 
    .slide(...) 
    .whatever(...); 

Answer 3

Es mucho más rápido utilizar una variable llamada en lugar de pasar un selector jQuery una vez por cada acción. Sin embargo, como ya se mencionó, el encadenamiento es una solución óptima en la mayoría de los casos. Puedes verlo por ti mismo. Aquí está una prueba que acabo de hacer:

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script> 
$(function(){ 
    //Try changing this value to see what happens as the number of nodes increases or decreases. 
    for(i=1;i<2905;i++){ 
    $('body').append('<div id="'+i+'">'+i+'</div>') 
    } 
    //Case 1: Query the DOM once for each action 
    var start = new Date().getTime(); 
    $('#2900').css('color','red'); 
    $('#2900').hide(); 
    $('#2900').show(); 
    $('#2900').html(new Date().getTime() - start); 

    //Case 2: Chaining. Each method passed $('this') to the next one 
    var start = new Date().getTime(); 
    $('#2901').css('color','blue').hide().show().html(new Date().getTime() - start); 

    //Case 3: Use of a named variable 
    var start = new Date().getTime(); 
    var a = $('#2902'); 
    a.css('color','green'); 
    a.hide(); 
    a.show(); 
    a.html(new Date().getTime() - start); 

}) 
</script> 

ACTUALIZACIÓN:

Al parecer Firefox hace algún tipo de almacenamiento en caché y los tres casos realizan de manera muy similar. Por otro lado, Chrome y Safari tienen un rendimiento bastante pobre en el caso 1, en comparación con los casos 2 y 3 (especialmente a medida que aumenta el número o los nodos).