¿jQuery hace algún tipo de almacenamiento en caché de "selectores"?

Question

Por ejemplo, ¿la primera parte del código realizará una búsqueda completa dos veces, o es lo suficientemente inteligente como para almacenar en caché los resultados si no se han producido cambios en el DOM?

if ($("#navbar .heading").text() > "") { 
    $("#navbar .heading").hide(); 
} 

y

var $heading = $("#navbar .heading"); 

if ($heading.text() > "") { 
    $heading.hide(); 
} 

Si el selector es más compleja que puedo imaginar es un éxito no trivial.

Answer 1

jQuery no es así, pero hay la posibilidad de asignar a las variables dentro de su expresión y luego usar la reutilización de aquellos en expresiones subsecuentes. Por lo tanto, la caché-ifying tu ejemplo ...

if ((cached = $("#navbar .heading")).text() > "") { 
    cached.hide(); 
} 

inconveniente es que hace que el código un poco fuglier y difícil de asimilar.

Answer 2

no creo que jquery haga ningún almacenamiento en memoria caché de selectores, sino que confía en xpath/javascript debajo para manejar eso. Dicho esto, hay una serie de optimizaciones que puede utilizar en sus selectores. aquí hay algunos artículos que cubren algunos aspectos básicos:

• Optimizing jQuery selector performance
• Performance analysis of selectors

Answer 3

No creo que lo hace (aunque no me siento como la lectura a través de tres y medio de miles de líneas de JavaScript en este momento para averiguarlo con certeza).

Sin embargo, lo que está haciendo no necesita varios selectores - esto debería funcionar:

$("#navbar .heading:not(:empty)").hide(); 

Answer 4

No es tanto una cuestión de '¿verdad?', Sino '¿puede?', Y no, no puede: puede haber agregado elementos adicionales coincidentes con el DOM desde la última consulta. Esto haría que el resultado de la caché fuera obsoleto, y jQuery no tendría otra forma (sensible) de decir que ejecutar la consulta de nuevo.

Por ejemplo:

$('#someid .someclass').show(); 
$('#someid').append('<div class="someclass">New!</div>'); 
$('#someid .someclass').hide(); 

En este ejemplo, el elemento recién añadido no se oculta si había alguna almacenamiento en caché de la consulta - sería ocultar solamente los elementos que fueron revelados anteriormente.

Answer 5

John Resig en su charla Jquery Internals en jQuery Camp 2008 menciona algunos navegadores que admiten eventos que se activan cuando se modifica el DOM. Para tales casos, los resultados de Selctor podrían almacenarse en caché.

Answer 6

que acabo de hacer un método para resolver este problema:

var cache = {}; 

function $$(s) 
{ 
    if (cache.hasOwnProperty(s)) 
    { 
     return $(cache[s]); 
    } 

    var e = $(s); 

    if(e.length > 0) 
    { 
     return $(cache[s] = e); 
    } 

} 

y funciona así:

$$('div').each(function(){ ... }); 

Los resultados son precisos en lo que puedo decir, basándose en esta simple comprobación :

console.log($$('#forms .col.r')[0] === $('#forms .col.r')[0]); 

NB, se romperá su aplicación MooTools o cualquier otra biblioteca que utilizaNotación.

Answer 7

¡Siempre guarde en caché sus selecciones!

Es inútil llamar constantemente al $(selector) una y otra vez con el mismo selector.

O casi siempre ... En general, debe mantener una copia en caché del objeto jQuery en una variable local, a menos que espere que haya cambiado o solo lo necesite una vez.

var element = $("#someid"); 

element.click(function() { 

    // no need to re-select #someid since we cached it 
    element.hide(); 
}); 

Answer 8

Al igual que en su $$ enfoque, he creado una función (del mismo nombre) que utiliza un patrón de memorización para mantener limpia global y también da cuenta de un segundo parámetro de contexto ... como $$ (". clase "," #context "). Esto es necesario si usa la función encadenada find() que ocurre después de que se devuelve $$; por lo tanto, no se almacenará en caché solo a menos que guarde en caché el objeto de contexto primero. También agregué un parámetro booleano al final (segundo o tercer parámetro dependiendo de si usa el contexto) para forzarlo a regresar al DOM.

Código:

function $$(a, b, c){ 
    var key; 
    if(c){ 
     key = a + "," + b; 
     if(!this.hasOwnProperty(key) || c){ 
      this[key] = $(a, b); 
     }   
    } 
    else if(b){ 
     if(typeof b == "boolean"){ 
      key = a; 
      if(!this.hasOwnProperty(key) || b){ 
       this[key] = $(a); 
      } 
     } 
     else{ 
      key = a + "," + b; 
      this[key] = $(a, b); 
     }    
    } 
    else{ 
     key = a; 
     if(!this.hasOwnProperty(key)){ 
      this[key] = $(a); 
     } 
    } 
    return this[key]; 
} 

Uso:

<div class="test">a</div> 
<div id="container"> 
    <div class="test">b</div> 
</div>​ 

<script> 
    $$(".test").append("1"); //default behavior 
    $$(".test", "#container").append("2"); //contextual 
    $$(".test", "#container").append("3"); //uses cache 
    $$(".test", "#container", true).append("4"); //forces back to the dome 
​ 
</script> 

Answer 9

Este $$() funciona bien - debe devolver un objeto jQuery válida en cualquier caso, un no definido.

¡Ten cuidado! Debe/no puede con selectores que dinámicamente pueden cambiar, ej. al agregar nodos que coinciden con el selector o utilizando pseudoclases.

function $$(selector) { 
    return cache.hasOwnProperty(selector) 
    ? cache[selector] 
    : cache[selector] = $(selector); 
}; 

Y $$ podría ser cualquier nombre de función, por supuesto.

Answer 10

jQuery Sizzle guarda automáticamente en caché las funciones recientes que se han creado desde los selectores para encontrar elementos DOM. Sin embargo, los elementos en sí mismos no están en la memoria caché.

Además, Sizzle mantiene un caché de las funciones compiladas más recientemente. La memoria caché tiene un tamaño máximo (que se puede ajustar pero tiene un valor predeterminado) para que no se salgan los errores de memoria cuando se usan muchos selectores diferentes.

Answer 11

Hay un buen complemento llamado jQache que hace exactamente eso. Después de instalar el complemento, generalmente hago esto:

var $$ = $ .q;

Y a continuación, sólo

$$ ("# barra de navegación .heading") ocultar().;

La mejor parte de todo esto es que también se puede limpiar su caché cuando sea necesario, si está haciendo cosas dinámica, por ejemplo:

$$ ("# barra de navegación .heading", verdadera).esconder(); // vacía el caché y oculta el nuevo #navbar (recién encontrado).en dirección

Y

$$ claro (.); // Borra el caché por completo

Answer 12

Comprobar si esto ayuda https://plugins.jquery.com/cache/

encontramos con este como parte de nuestro proyecto normal

Answer 13

jsPerf se ha reducido hoy, pero this article sugiere que las mejoras de rendimiento de almacenamiento en caché de los selectores de jQuery sería mínimo

Esto puede ser simplemente hacia abajo para el almacenamiento en caché del navegador. El selector probado solo tenía una identificación. Más pruebas se deben hacer para los selectores más complicados y diferentes estructuras de página ...

Answer 14

$ .selectorCache() es útil:

https://gist.github.com/jduhls/ceb7c5fdf2ae1fd2d613e1bab160e296

embed Síntesis:

<script src="https://gist.github.com/jduhls/ceb7c5fdf2ae1fd2d613e1bab160e296.js"></script>