Menemukan JavaScript kebocoran memori dengan Chrome
I've dibuat sangat sederhana kasus uji yang menciptakan tulang Punggung melihat, menempel handler untuk suatu acara, dan instantiates user-defined class. Saya percaya bahwa dengan mengklik "Hapus" tombol di contoh ini, semuanya akan dibersihkan dan tidak boleh ada kebocoran memori.
Sebuah jsfiddle untuk kode berikut:
// 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 belum jelas bagaimana menggunakan Google Chrome's profiler untuk memverifikasi bahwa ini adalah, pada kenyataannya, hal. Ada trilyunan hal-hal yang muncul pada tumpukan profiler snapshot, dan aku tidak tahu bagaimana untuk memecahkan kode apa yang's baik/buruk. Tutorial I've melihat sejauh ini baik hanya memberitahu saya untuk "menggunakan snapshot profiler" atau memberi saya sangat rinci manifesto pada bagaimana seluruh profiler bekerja. Adalah mungkin untuk hanya menggunakan profiler sebagai alat, atau apakah saya benar-benar harus memahami bagaimana seluruh hal itu direkayasa?
EDIT: Tutorial seperti ini:
Ini adalah perwakilan dari beberapa bahan yang lebih kuat di luar sana, dari apa yang saya've terlihat. Namun, di luar memperkenalkan konsep 3 Snapshot Teknik, saya menemukan mereka menawarkan sangat sedikit dalam hal pengetahuan praktis (untuk pemula seperti saya). The 'Menggunakan DevTools' tutorial doesn't bekerja melalui contoh nyata, sehingga samar-samar dan umum deskripsi konseptual dari hal-hal yang tidak't terlalu membantu. Adapun 'Gmail' contoh:
Jadi anda menemukan kebocoran. Sekarang apa?
Memeriksa penahan jalan bocor benda-benda di bagian bawah Profil panel
Jika alokasi situs tidak dapat dengan mudah disimpulkan (yaitu acara pendengar):
Instrumen konstruktor mempertahankan objek melalui konsol JS untuk menyimpan jejak stack untuk alokasi
Menggunakan Penutupan? Mengaktifkan tepat ada bendera (yaitu goog.peristiwa.Pendengar.ENABLE_MONITORING) untuk mengatur creationStack properti selama konstruksi
Saya menemukan diri saya lebih bingung setelah membaca itu, tidak kurang. Dan, sekali lagi, itu's hanya memberitahu saya untuk tidak hal-hal, tidak cara untuk melakukannya. Dari perspektif saya, semua informasi di luar sana terlalu samar-samar atau hanya akan masuk akal untuk seseorang yang sudah mengerti proses.
Beberapa dari ini lebih spesifik masalah yang telah dikemukakan di @Jonathan Naguin's jawaban di bawah ini.
Alur kerja yang baik untuk menemukan kebocoran memori adalah tiga snapshot teknik, pertama kali digunakan oleh Loreena Lee dan tim Gmail untuk memecahkan beberapa masalah memori. Langkah-langkah secara umum adalah:
- Mengambil tumpukan snapshot.
- Melakukan hal-hal.
- Mengambil tumpukan snapshot.
- Ulangi hal yang sama.
- Mengambil tumpukan snapshot.
- Filter benda-benda yang dialokasikan antara Foto 1 dan 2 di Snapshot 3's "Summary" melihat.
Untuk contoh, saya telah beradaptasi kode untuk menunjukkan proses ini (anda dapat menemukannya di sini) menunda penciptaan tulang Punggung Melihat sampai acara klik tombol Start. Sekarang:
- Jalankan HTML (disimpan secara lokal menggunakan ini alamat) dan mengambil snapshot.
- Klik Start untuk membuat tampilan.
- Mengambil foto lainnya.
- Klik hapus.
- Mengambil foto lainnya.
- Filter benda-benda yang dialokasikan antara Foto 1 dan 2 di Snapshot 3's "Summary" melihat.
Sekarang anda siap untuk menemukan kebocoran memori!
Anda akan melihat node dari beberapa warna yang berbeda. Merah node tidak memiliki referensi langsung dari Javascript untuk mereka, tapi ini adalah hidup karena mereka adalah bagian terpisah pohon DOM. Mungkin ada node di pohon dirujuk dari Javascript (mungkin sebagai penutupan atau variabel) tapi kebetulan mencegah seluruh pohon DOM dari sampah yang dikumpulkan.
Kuning bening namun tidak memiliki referensi langsung dari Javascript. Mencari kuning node yang sama terlepas pohon DOM untuk menemukan referensi dari Javascript anda. Harus ada jaringan properti terkemuka dari DOM jendela untuk elemen.
Anda tertentu anda dapat melihat HTML elemen Div yang ditandai merah. Jika anda memperluas elemen anda akan melihat bahwa direkomendasikan oleh "cache" fungsi.
Pilih baris dan di konsol anda ketikkan $0, anda akan melihat sebenarnya fungsi dan lokasi:
>$0
function cache( key, value ) {
// Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
if ( keys.push( key += " " ) > Expr.cacheLength ) {
// Only keep the most recent entries
delete cache[ keys.shift() ];
}
return (cache[ key ] = value);
} jquery-2.0.2.js:1166Ini adalah di mana anda elemen yang direferensikan. Sayangnya tidak ada banyak yang dapat anda lakukan, itu adalah mekanisme internal dari jQuery. Tapi, hanya untuk tujuan pengujian, pergi fungsi dan mengubah metode untuk:
function cache( key, value ) {
return value;
}Sekarang jika anda mengulangi proses ini anda tidak akan melihat apapun merah node :)
Dokumentasi:
Berikut ini's tip pada memori profil dari jsfiddle: Gunakan URL berikut untuk mengisolasi anda jsfiddle hasilnya, ini akan menghapus semua dari jsfiddle kerangka kerja dan beban hanya hasil anda.
Saya tidak bisa mencari cara untuk menggunakan Timeline dan Profiler untuk melacak kebocoran memori, sampai saya membaca dokumentasi-dokumentasi berikut. Setelah membaca bagian yang berjudul 'Objek alokasi tracker' I bisa menggunakan 'Catatan Tumpukan Alokasi' alat, dan melacak beberapa beberapa Terlepas DOM node.
Saya tetap masalah dengan beralih dari jQuery acara mengikat, untuk menggunakan Backbone acara delegasi. It's pemahaman saya bahwa versi baru dari Punggung secara otomatis akan memperlonggar acara untuk anda jika anda menelepon Melihat.hapus(). Menjalankan beberapa demo diri sendiri, mereka diatur dengan kebocoran memori bagi anda untuk mengidentifikasi. Merasa bebas untuk mengajukan pertanyaan di sini jika anda masih don't mendapatkan itu setelah mempelajari dokumentasi ini.
https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling
Pada dasarnya anda perlu untuk melihat jumlah benda-benda di dalam tumpukan snapshot. Jika jumlah objek yang meningkat antara dua foto dan anda've dibuang dari benda maka anda memiliki kebocoran memori. Saran saya adalah untuk mencari event handler dalam kode anda yang tidak bisa terlepas.
Anda juga bisa melihat Timeline tab di alat pengembang. Catatan penggunaan aplikasi anda dan menjaga mata pada DOM Node dan pendengar Acara hitung.
Jika memori grafik memang akan menunjukkan kebocoran memori, maka anda dapat menggunakan profiler untuk mencari tahu apa yang bocor.
Anda juga mungkin ingin anda baca :
http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/
Ini menjelaskan penggunaan chrome developer tools dan memberikan beberapa langkah-demi-langkah saran tentang cara untuk mengkonfirmasi dan menemukan kebocoran memori menggunakan tumpukan snapshot perbandingan dan berbeda hep snapshot tampilan yang tersedia.
Saya kedua saran untuk mengambil tumpukan snapshot, mereka're yang sangat baik untuk mendeteksi kebocoran memori, chrome melakukan pekerjaan yang sangat baik dari snapshotting.
Dalam proyek penelitian untuk gelar saya saya membangun aplikasi web interaktif aplikasi yang telah menghasilkan banyak data built up di 'lapisan', banyak dari lapisan ini akan 'dihapus' di UI tapi untuk beberapa alasan memori itu't menjadi deallocated, menggunakan alat snapshot aku mampu menentukan bahwa JQuery telah menjaga referensi pada objek (sumber itu ketika saya mencoba untuk memicu .beban() acara yang terus referensi meskipun akan keluar dari lingkup). Memiliki informasi ini di tangan sendirian disimpan proyek saya, it's alat yang sangat berguna ketika anda're menggunakan orang lain's perpustakaan dan anda memiliki masalah ini berkepanjangan referensi menghentikan GC melakukan tugasnya.
EDIT: It's juga berguna untuk merencanakan ke depan apa tindakan anda'kembali akan melakukan untuk meminimalkan waktu yang dihabiskan snapshotting, berhipotesis apa yang bisa menyebabkan masalah dan menguji masing-masing skenario, membuat foto-foto sebelum dan sesudah.
