¿Cuál es el propósito de $ .cache en jQuery?

Question

Veo que los controladores de eventos registrados a través de .on() se encuentran en $.cache. También veo que los controladores de eventos también se mantienen en $(elem).data().

Los objetos contenidos en $.cache se refieren a los nodos DOM en los que se registran los eventos. Esto lleva a la pérdida de memoria cuando los nodos DOM están separados, y esto hace que las llamadas a .off() sean obligatorias.

Tengo una situación en la que no sé cuándo se desconectará el nodo DOM (al que adjunté el controlador de eventos). Si bien puedo mantener la referencia a ese nodo DOM en mi código y llamar al .off() para limpiar, no me parece agradable, porque no es sencillo saber cuándo se eliminará el nodo DOM.

¿Cuál es la mejor manera de hacerlo?

Answer 1

"¿Cuál es la mejor manera de hacer esto?"

Si vas a usar jQuery, que debe usar su API para la eliminación de elementos, y debe utilizar los métodos adecuados, de lo contrario, como ha afirmado, tendrá pérdidas de memoria.

Si no sabe cuándo se eliminará el nodo DOM, y si está causando una fuga, supongo que esto significa que está utilizando otra biblioteca junto con jQuery. Esa no es una buena idea por esta misma razón.

Debe asegurarse de que jQuery elimine los elementos afectados por jQuery. También hay algunos datos almacenados en $.cache que no estableció explícitamente. Esto significa que todos los elementos se deben eliminar con jQuery, en lugar de solo aquellos que piensan que pueden tener datos.

---

"¿Cuál es el propósito de $.cache en jQuery?"

Para asociar los controladores y otros datos con los elementos. El enlace entre los datos y los elementos es básicamente un número de serie almacenado en una propiedad expando en el elemento.

Si elimina el elemento sin jQuery, los datos asociados en $.cache quedan huérfanos.

El objetivo de este enfoque era evitar posibles fugas. Lamentablemente, crea fugas más graves.

Answer 2

Me encontré en una situación similar donde Knockout se utiliza para agregar y eliminar árboles dom del documento. Sin embargo, jquery se usa para adjuntar detectores de eventos a estos árboles dom. Cuando el knockout elimina elementos dom del documento, los oyentes no se desenlazan, por lo que el árbol dom no es elegible para la recolección de basura. Hemos agregado una función de limpieza que rastrea a través de jquery $ .cache cada vez que cambia el hash y encuentra incluso controladores que están vinculados a árboles dom que no están en el documento. A continuación, desvincula a los oyentes para que el árbol dom sea elegible para la recolección de basura y arregle la mayoría de las filtraciones que estamos viendo, es decir, un viaje de ida y vuelta de la aplicación utilizada para filtrar 13MB ahora filtra solo 3MB con estos cambios en su lugar.

for (var i in $.cache) { 
      if ($.cache.hasOwnProperty(i)) { 

       if ($.cache[i].handle && $.cache[i].handle.elem && document !== $.cache[i].handle.elem && !jQuery.contains(document, $.cache[i].handle.elem)) { 
        //we have an event handler pointing to a detached dom element! 
        //this is a memory leak as this detached dom element cannot be garbage collected until 
        //all references to it are removed. So lets delete the event handler to get memory back! 
        var orphan = $($.cache[i].handle.elem); 
        $('body').append(orphan); 
        orphan.off(); 
        orphan.remove(); 
        orphan = null; 
       } 
      } 
     }