Artikel ini menjelaskan kebocoran memori JavaScript dan keterampilan manajemen memori, yang sangat praktis. Bagikan untuk referensi Anda. Metode spesifiknya adalah sebagai berikut:
Konten artikel ini berasal dari Google Webperf (London Webperf Group), 26 Agustus 2014.
Secara umum, aplikasi web JavaScript yang efisien harus lancar dan cepat. Aplikasi apa pun yang berinteraksi dengan pengguna perlu mempertimbangkan cara memastikan memori digunakan secara efisien, karena jika dikonsumsi terlalu banyak, halaman akan macet, memaksa pengguna untuk memuat ulang. Dan Anda hanya bisa bersembunyi di sudut dan menangis.
Koleksi sampah otomatis bukan pengganti untuk manajemen memori yang efektif, terutama dalam aplikasi web yang luas dan berjalan lama. Dalam artikel ini, kami akan menunjukkan cara mengelola memori secara efektif melalui Devtools Chrome.
Dan pelajari cara memecahkan masalah kinerja seperti kebocoran memori, pengumpulan sampah yang sering terjadi jeda, dan memori secara keseluruhan, hal -hal yang benar -benar dikenakan biaya energi.
Addy Osmani menunjukkan banyak contoh di PPT -nya yang akan menyebabkan kebocoran memori di Chrome v8:
1) Hapus properti objek untuk memperlambat objek ini (mengkonsumsi memori 15 kali lebih banyak)
var o = {x: 'y'}; hapus sapi; // Pada saat ini o akan menjadi objek yang lambat sapi; // var o = {x: 'y'}; o = null; // Ini seharusnya2) Penutupan
Saat memperkenalkan variabel di luar penutupan ke dalam penutupan, objek ini tidak dapat dikumpulkan (GC) saat penutupan berakhir.
var a = function () {var terbesar = array baru (1000000) .join ('x'); return function () {return terbesar; }} ();3) DOM BUKU
Ketika COM asli dihapus, referensi sub-node tidak dapat didaur ulang jika tidak dihapus.
var select = document.queryselector; var treeref = select ('#tree'); // Di pohon com, leaffef adalah simpul anak dari treefre var leafe = select ('#leaf'); var body = pilih ('body'); body.removechild (treeref); //#pohon tidak dapat dilunasi karena treeref masih ada // solusi: treeref = null; // pohon tidak dapat dilunasi karena leaffef masih ada leafe = null; // Sekarang #Tree dapat dirilis.4) Penghitungan penghitung waktu (penentuan) pengatur waktu kebocoran
Pengatur waktu juga merupakan tempat umum di mana kebocoran memori terjadi:
untuk (var i = 0; i <90000; i ++) {var buggyObject = {callAgain: function () {var ref = this; var val = setTimeOut (function () {ref.callagain ();}, 90000); }} buggyObject.callagain (); // Meskipun Anda ingin mendaur ulang, timer masih buggyObject = null;}5) Debug Memory
Alat debugging memori Chrome sendiri dapat dengan mudah melihat penggunaan memori dan kebocoran memori:
Klik Rekam di Timeline -> Memori:
Saya harap artikel ini akan membantu semua orang belajar pemrograman JavaScript.