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
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.
main10,000 veces en lugar de una vez, y ver si al final tiene mucha más memoria en uso.
