Saya telah membuat test case yang sangat sederhana yang menciptakan tampilan Backbone, melampirkan handler ke suatu peristiwa, dan membuat instance kelas yang ditentukan pengguna. Saya percaya bahwa dengan mengklik tombol "Hapus" dalam sampel ini, semuanya akan dibersihkan dan seharusnya tidak ada kebocoran memori.
Jsfiddle untuk kode ada di sini: 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();
Namun, saya tidak jelas bagaimana cara menggunakan profiler Google Chrome untuk memverifikasi bahwa ini adalah kenyataannya. Ada trilyun hal yang muncul di snapshot profiler tumpukan, dan saya tidak tahu bagaimana untuk memecahkan kode apa yang baik / buruk. Tutorial yang saya lihat sejauh ini hanya memberi tahu saya untuk "menggunakan snapshot profiler" atau memberi saya manifesto yang sangat rinci tentang cara kerja seluruh profiler. Apakah mungkin hanya menggunakan profiler sebagai alat, atau apakah saya benar-benar harus memahami bagaimana semuanya direkayasa?
EDIT: Tutorial seperti ini:
Memperbaiki kebocoran memori Gmail
Merupakan perwakilan dari beberapa materi kuat di luar sana, dari apa yang saya lihat. Namun, di luar memperkenalkan konsep 3 Snapshot Technique , saya menemukan mereka menawarkan sangat sedikit dalam hal pengetahuan praktis (untuk pemula seperti saya). Tutorial 'Menggunakan DevTools' tidak bekerja melalui contoh nyata, jadi deskripsi konseptualnya yang kabur dan umum tidak terlalu membantu. Adapun contoh 'Gmail':
Jadi Anda menemukan kebocoran. Sekarang apa?
Periksa jalur penahan benda bocor di bagian bawah panel Profil
Jika situs alokasi tidak dapat disimpulkan dengan mudah (mis. Pendengar acara):
Instrumen konstruktor objek penahan melalui konsol JS untuk menyimpan jejak stack untuk alokasi
Menggunakan Penutupan? Aktifkan flag yang sesuai yang ada (yaitu goog.events.Listener.ENABLE_MONITORING) untuk mengatur properti creationStack selama konstruksi
Saya menemukan diri saya lebih bingung setelah membaca itu, tidak kurang. Dan, sekali lagi, ini hanya memberitahu saya untuk melakukan sesuatu, bukan bagaimana melakukannya. Dari sudut pandang saya, semua informasi di luar sana terlalu samar atau hanya akan masuk akal bagi seseorang yang sudah memahami prosesnya.
Beberapa masalah yang lebih spesifik ini telah diangkat dalam jawaban @Jonathan Naguin di bawah ini.
main10.000 kali, bukan sekali, dan melihat apakah Anda memiliki lebih banyak memori yang digunakan di akhir.
