Ho creato un test case molto semplice che crea una vista Backbone, collega un gestore a un evento e crea un'istanza di una classe definita dall'utente. Credo che facendo clic sul pulsante "Rimuovi" in questo esempio, tutto verrà ripulito e non dovrebbero esserci perdite di memoria.
Un jsfiddle per il codice è qui: 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();Tuttavia, non sono chiaro come utilizzare il profiler di Google Chrome per verificare che ciò avvenga effettivamente. Ci sono un sacco di cose che appaiono nell'istantanea del profilatore heap e non ho idea di come decodificare ciò che è buono / cattivo. I tutorial che ho visto finora o semplicemente mi dicono di "usare il profiler di snapshot" o di darmi un manifesto estremamente dettagliato su come funziona l'intero profiler. È possibile utilizzare semplicemente il profiler come strumento o devo davvero capire come è stata progettata l'intera faccenda?
EDIT: tutorial come questi:
Correzione della perdita di memoria di Gmail
Sono rappresentativi di alcuni dei materiali più forti là fuori, da quello che ho visto. Tuttavia, oltre a introdurre il concetto di 3 Snapshot Technique , trovo che offrano molto poco in termini di conoscenza pratica (per un principiante come me). Il tutorial 'Uso di DevTools' non funziona attraverso un esempio reale, quindi la sua descrizione concettuale vaga e generale delle cose non è eccessivamente utile. Come nell'esempio "Gmail":
Quindi hai trovato una perdita. E adesso?
Esamina il percorso di mantenimento degli oggetti trapelati nella metà inferiore del pannello Profili
Se il sito di allocazione non può essere dedotto facilmente (ad esempio listener di eventi):
Strumentare il costruttore dell'oggetto di mantenimento tramite la console JS per salvare la traccia dello stack per le allocazioni
Usando la chiusura? Abilitare il flag esistente appropriato (ovvero goog.events.Listener.ENABLE_MONITORING) per impostare la proprietà creationStack durante la costruzione
Mi trovo più confuso dopo averlo letto, non meno. E, ancora una volta, mi sta solo dicendo di fare le cose, non come farle. Dal mio punto di vista, tutte le informazioni là fuori sono o troppo vaghe o avrebbero senso solo per qualcuno che ha già capito il processo.
Alcune di queste questioni più specifiche sono state sollevate nella risposta di @Jonathan Naguin di seguito.
main10.000 volte anziché una volta e vedere se alla fine si ottiene molta più memoria in uso.
