Criei um caso de teste muito simples que cria uma visualização Backbone, anexa um manipulador a um evento e instancia uma classe definida pelo usuário. Acredito que, ao clicar no botão "Remover" neste exemplo, tudo será limpo e não haverá vazamento de memória.
Um jsfiddle para o código está aqui: 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();No entanto, não estou claro como usar o criador de perfil do Google Chrome para verificar se esse é realmente o caso. Há um zilhão de coisas que aparecem no instantâneo do heap profiler, e não tenho idéia de como decodificar o que é bom / ruim. Os tutoriais que eu vi até agora ou apenas me dizem para "usar o snapshot profiler" ou me dão um manifesto detalhado sobre como o profiler inteiro funciona. É possível apenas usar o criador de perfil como uma ferramenta, ou eu realmente tenho que entender como tudo foi projetado?
EDIT: Tutoriais como estes:
Correção de vazamento de memória do Gmail
São representativos de alguns dos materiais mais fortes por aí, pelo que vi. No entanto, além de introduzir o conceito da 3 Snapshot Technique , acho que eles oferecem muito pouco em termos de conhecimento prático (para um iniciante como eu). O tutorial 'Usando o DevTools' não funciona com um exemplo real, portanto, sua descrição conceitual vaga e geral das coisas não é muito útil. Quanto ao exemplo 'Gmail':
Então você encontrou um vazamento. O que agora?
Examine o caminho de retenção de objetos vazados na metade inferior do painel Perfis
Se o site de alocação não puder ser facilmente deduzido (ou seja, ouvintes de eventos):
Instrumentar o construtor do objeto de retenção por meio do console JS para salvar o rastreamento de pilha para alocações
Usando Closure? Ative o sinalizador existente apropriado (por exemplo, goog.events.Listener.ENABLE_MONITORING) para definir a propriedade creationStack durante a construção
Eu me sinto mais confusa depois de ler isso, não menos. E, novamente, está apenas me dizendo para fazer as coisas, não como fazê-las. Do meu ponto de vista, todas as informações existentes são muito vagas ou apenas fazem sentido para alguém que já entendeu o processo.
Algumas dessas questões mais específicas foram levantadas na resposta de Jonathan Naguin abaixo.
main10.000 vezes em vez de uma vez e verificar se você acaba com muito mais memória em uso no final.
