Encontrar pérdidas de memoria JavaScript con Chrome

He creado un caso de prueba muy simple que crea una vista Backbone, adjunta un controlador a un evento e instancia una clase definida por el usuario. Creo que al hacer clic en el botón "Eliminar" en esta muestra, todo se limpiará y no debería haber pérdidas de memoria.

Un jsfiddle para el código está aquí: http://jsfiddle.net/4QhR2/

// scope everything to a function
function main() {

    function MyWrapper() {
        this.element = null;
    }
    MyWrapper.prototype.set = function(elem) {
        this.element = elem;
    }
    MyWrapper.prototype.get = function() {
        return this.element;
    }

    var MyView = Backbone.View.extend({
        tagName : "div",
        id : "view",
        events : {
            "click #button" : "onButton",
        },    
        initialize : function(options) {        
            // done for demo purposes only, should be using templates
            this.html_text = "<input type='text' id='textbox' /><button id='button'>Remove</button>";        
            this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
        },
        render : function() {        
            this.$el.html(this.html_text);

            this.wrapper = new MyWrapper();
            this.wrapper.set(this.$("#textbox"));
            this.wrapper.get().val("placeholder");

            return this;
        },
        onButton : function() {
            // assume this gets .remove() called on subviews (if they existed)
            this.trigger("cleanup");
            this.remove();
        }
    });

    var view = new MyView();
    $("#content").append(view.render().el);
}

main();

Sin embargo, no tengo claro cómo usar el perfilador de Google Chrome para verificar que este sea, de hecho, el caso. Hay miles de millones de cosas que aparecen en la instantánea del generador de perfiles del montón, y no tengo idea de cómo decodificar lo que es bueno / malo. Los tutoriales que he visto hasta ahora solo me dicen que "use el generador de perfiles de instantáneas" o me dan un manifiesto enormemente detallado sobre cómo funciona todo el generador de perfiles. ¿Es posible usar el generador de perfiles como una herramienta, o realmente tengo que entender cómo se diseñó todo?

EDITAR: Tutoriales como estos:

Solución de fugas de memoria de Gmail

Usando DevTools

Son representativos de algunos de los materiales más fuertes que existen, por lo que he visto. Sin embargo, más allá de presentar el concepto de la técnica de 3 instantáneas , encuentro que ofrecen muy poco en términos de conocimiento práctico (para un principiante como yo). El tutorial 'Uso de DevTools' no funciona a través de un ejemplo real, por lo que su descripción conceptual vaga y general de las cosas no es demasiado útil. En cuanto al ejemplo de 'Gmail':

Entonces encontraste una fuga. ¿Ahora que?

• Examine la ruta de retención de los objetos filtrados en la mitad inferior del panel Perfiles.

• Si el sitio de asignación no se puede inferir fácilmente (es decir, oyentes de eventos):

• Instrumente al constructor del objeto de retención a través de la consola JS para guardar el seguimiento de la pila para asignaciones

• ¿Usando cierre? Habilite el indicador existente apropiado (es decir, goog.events.Listener.ENABLE_MONITORING) para establecer la propiedad creationStack durante la construcción

Me encuentro más confundido después de leer eso, no menos. Y, de nuevo, solo me dice que haga cosas, no cómo hacerlas. Desde mi punto de vista, toda la información que existe es demasiado vaga o solo tendría sentido para alguien que ya entendió el proceso.

Algunos de estos problemas más específicos se han planteado en la respuesta de @Jonathan Naguin a continuación.

Un buen flujo de trabajo para encontrar fugas de memoria es la técnica de tres instantáneas , utilizada por primera vez por Loreena Lee y el equipo de Gmail para resolver algunos de sus problemas de memoria. Los pasos son, en general:

• Tome una instantánea del montón.
• Hacer cosas.
• Tome otra instantánea del montón.
• Repite lo mismo.
• Tome otra instantánea del montón.
• Filtrar objetos asignados entre las instantáneas 1 y 2 en la vista "Resumen" de la instantánea 3.

Para su ejemplo, he adaptado el código para mostrar este proceso (puede encontrarlo aquí ) retrasando la creación de la Vista Backbone hasta el evento de clic del botón Inicio. Ahora:

• Ejecute el HTML (guardado localmente al usar esta dirección ) y tome una instantánea.
• Haga clic en Inicio para crear la vista.
• Toma otra instantánea.
• Haz clic en eliminar.
• Toma otra instantánea.
• Filtrar objetos asignados entre las instantáneas 1 y 2 en la vista "Resumen" de la instantánea 3.

¡Ahora estás listo para encontrar pérdidas de memoria!

Notará nodos de algunos colores diferentes. Los nodos rojos no tienen referencias directas de Javascript a ellos, pero están vivos porque son parte de un árbol DOM separado. Puede haber un nodo en el árbol al que se hace referencia desde Javascript (tal vez como un cierre o variable), pero casualmente impide que se recolecte basura todo el árbol DOM.

Sin embargo, los nodos amarillos tienen referencias directas de Javascript. Busque nodos amarillos en el mismo árbol DOM separado para ubicar referencias de su Javascript. Debe haber una cadena de propiedades que conduzca desde la ventana DOM al elemento.

En su particular, puede ver un elemento Div HTML marcado como rojo. Si expande el elemento verá que hace referencia a una función "caché".

Seleccione la fila y en su consola escriba $ 0, verá la función y ubicación reales:

>$0
function cache( key, value ) {
        // Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
        if ( keys.push( key += " " ) > Expr.cacheLength ) {
            // Only keep the most recent entries
            delete cache[ keys.shift() ];
        }
        return (cache[ key ] = value);
    }                                                     jquery-2.0.2.js:1166

Aquí es donde se hace referencia a su elemento. Desafortunadamente no hay mucho que puedas hacer, es un mecanismo interno de jQuery. Pero, solo para fines de prueba, vaya a la función y cambie el método a:

function cache( key, value ) {
    return value;
}

Ahora, si repite el proceso, no verá ningún nodo rojo :)

Documentación:

• Eliminando pérdidas de memoria en Gmail .
• Aliviar el perfil de memoria de JavaScript en Chrome DevTools .

Aquí hay un consejo sobre el perfil de memoria de un jsfiddle: use la siguiente URL para aislar su resultado jsfiddle, elimina todo el marco jsfiddle y carga solo su resultado.

http://jsfiddle.net/4QhR2/show/

Nunca pude descubrir cómo usar la línea de tiempo y el generador de perfiles para rastrear pérdidas de memoria, hasta que leí la siguiente documentación. Después de leer la sección titulada 'Rastreador de asignación de objetos' pude usar la herramienta 'Grabar asignaciones de montón' y rastrear algunos nodos DOM separados.

Solucioné el problema al cambiar del enlace de eventos jQuery a usar la delegación de eventos Backbone. Tengo entendido que las versiones más recientes de Backbone desvincularán automáticamente los eventos si llama View.remove(). Ejecute algunas de las demostraciones usted mismo, están configuradas con pérdidas de memoria para que pueda identificarlas. Siéntase libre de hacer preguntas aquí si aún no lo recibe después de estudiar esta documentación.

https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling

Básicamente, debe mirar la cantidad de objetos dentro de su instantánea de montón. Si el número de objetos aumenta entre dos instantáneas y ha eliminado los objetos, entonces tiene una pérdida de memoria. Mi consejo es buscar controladores de eventos en su código que no se separen.

Hay un video de introducción de Google, que será muy útil para encontrar fugas de memoria de JavaScript.

https://www.youtube.com/watch?v=L3ugr9BJqIs

También puede mirar la pestaña Línea de tiempo en las herramientas para desarrolladores. Registre el uso de su aplicación y vigile el recuento de oyentes del nodo DOM y el evento.

Si el gráfico de memoria indicara una pérdida de memoria, entonces puede usar el generador de perfiles para averiguar qué está perdiendo.

También es posible que desee leer:

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

Explica el uso de las herramientas para desarrolladores de Chrome y ofrece algunos consejos paso a paso sobre cómo confirmar y localizar una pérdida de memoria mediante la comparación de instantáneas de montón y las diferentes vistas de instantáneas hep disponibles.

Respaldo el consejo de tomar una instantánea del montón, son excelentes para detectar fugas de memoria, Chrome hace un excelente trabajo de instantáneas.

En mi proyecto de investigación para mi título, estaba creando una aplicación web interactiva que tenía que generar una gran cantidad de datos acumulados en 'capas', muchas de estas capas serían 'eliminadas' en la interfaz de usuario, pero por alguna razón la memoria no era al ser desasignado, usando la herramienta de instantáneas pude determinar que JQuery había estado manteniendo una referencia en el objeto (la fuente fue cuando estaba tratando de desencadenar un .load()evento que mantuvo la referencia a pesar de estar fuera de alcance). Tener esta información a la mano guardó mi proyecto sin ayuda, es una herramienta muy útil cuando está utilizando las bibliotecas de otras personas y tiene este problema de referencias persistentes que impiden que el GC haga su trabajo.

EDITAR: También es útil planificar con anticipación qué acciones va a realizar para minimizar el tiempo dedicado a las instantáneas, plantear la hipótesis de lo que podría estar causando el problema y probar cada escenario, haciendo instantáneas antes y después.

Un par de notas importantes con respecto a la identificación de pérdidas de memoria con las herramientas de desarrollador de Chrome:

1) Chrome tiene pérdidas de memoria para ciertos elementos, como los campos de contraseña y número. https://bugs.chromium.org/p/chromium/issues/detail?id=967438 . Evite usarlos durante la depuración, ya que contaminan su instantánea del montón al buscar elementos separados.

2) Evite registrar cualquier cosa en la consola del navegador. Chrome no recolectará basura los objetos escritos en la consola, lo que afectará su resultado. Puede suprimir la salida colocando el siguiente código al comienzo de su script / página:

console.log = function() {};
console.warn = console.log;
console.error = console.log;

3) Use instantáneas de montón y busque "separar" para identificar elementos DOM separados. Al pasar el cursor sobre los objetos, obtienes acceso a todas las propiedades, incluidos id y externalHTML, que pueden ayudar a identificar cada elemento. Si los elementos separados siguen siendo demasiado genéricos para reconocerlos, asígneles ID únicos utilizando la consola del navegador antes de ejecutar su prueba, por ejemplo:

var divs = document.querySelectorAll("div");
for (var i = 0 ; i < divs.length ; i++)
{
    divs[i].id = divs[i].id || "AutoId_" + i;
}
divs = null; // Free memory

Ahora, cuando identifique un elemento separado con, digamos id = "AutoId_49", vuelva a cargar su página, ejecute el fragmento de arriba y encuentre el elemento con id = "AutoId_49" utilizando el inspector DOM o document.querySelector (..) . Naturalmente, esto solo funciona si el contenido de su página es predecible.

Cómo ejecuto mis pruebas para identificar pérdidas de memoria

1) Cargar página (con salida de consola suprimida)

2) Haga cosas en la página que podrían provocar pérdidas de memoria

3) Use las herramientas de desarrollador para tomar una instantánea del montón y busque "separar"

4) Desplace los elementos para identificarlos desde sus propiedades id o externalHTML