J'ai créé un cas de test très simple qui crée une vue Backbone, attache un gestionnaire à un événement et instancie une classe définie par l'utilisateur. Je crois qu'en cliquant sur le bouton "Supprimer" dans cet exemple, tout sera nettoyé et il ne devrait y avoir aucune fuite de mémoire.
Un jsfiddle pour le code est ici: 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();Cependant, je ne sais pas comment utiliser le profileur de Google Chrome pour vérifier que c'est bien le cas. Il y a des milliards de choses qui apparaissent sur l'instantané du profileur de tas, et je n'ai aucune idée de comment décoder ce qui est bon / mauvais. Les tutoriels que j'ai vus à ce sujet jusqu'à présent me disent simplement d '"utiliser le profileur d'instantané" ou me donnent un manifeste extrêmement détaillé sur le fonctionnement de l'ensemble du profileur. Est-il possible d'utiliser simplement le profileur comme un outil, ou dois-je vraiment comprendre comment tout a été conçu?
EDIT: Tutoriels comme ceux-ci:
Correction des fuites de mémoire Gmail
Sont représentatifs de certains des matériaux les plus solides, d'après ce que j'ai vu. Cependant, au-delà de l'introduction du concept de la technique des 3 instantanés , je trouve qu'ils offrent très peu de connaissances pratiques (pour un débutant comme moi). Le didacticiel «Utilisation de DevTools» ne fonctionne pas à travers un exemple réel, donc sa description conceptuelle vague et générale des choses n'est pas trop utile. Quant à l'exemple "Gmail":
Vous avez donc trouvé une fuite. Maintenant quoi?
Examinez le chemin de rétention des objets ayant fui dans la moitié inférieure du panneau Profils
Si le site d'allocation ne peut pas être facilement déduit (c'est-à-dire les écouteurs d'événements):
Instrumenter le constructeur de l'objet de rétention via la console JS pour enregistrer la trace de pile pour les allocations
Utilisation de la fermeture? Activez l'indicateur existant approprié (c'est-à-dire goog.events.Listener.ENABLE_MONITORING) pour définir la propriété creationStack pendant la construction
Je me trouve plus confus après avoir lu cela, pas moins. Et, encore une fois, cela me dit simplement de faire les choses, pas comment les faire. De mon point de vue, toutes les informations disponibles sont trop vagues ou n'auraient de sens que pour quelqu'un qui a déjà compris le processus.
Certains de ces problèmes plus spécifiques ont été soulevés dans la réponse de @Jonathan Naguin ci-dessous.
main10 000 fois au lieu d'une seule et voir si vous vous retrouvez avec beaucoup plus de mémoire utilisée à la fin.
