Diposting di Google Webperf (London Webperf Group), 26 Agustus 2014.
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 kuliah 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)
Salinan kode adalah sebagai berikut:
var o = {x: 'y'};
hapus sapi; // Saat ini o akan menjadi objek yang lambat
sapi; //
var o = {x: 'y'};
o = null; // Seharusnya seperti ini
2) Penutupan
Saat memperkenalkan variabel di luar penutupan ke dalam penutupan, objek ini tidak dapat dikumpulkan (GC) saat penutupan berakhir.
Salinan kode adalah sebagai berikut:
var a = function () {
var terbesar = array baru (1000000) .jamin ('x');
return function () {
mengembalikan terbesar;
}
} ();
3) DOM BUKU
Ketika COM asli dihapus, referensi sub-node tidak dapat didaur ulang jika tidak dihapus.
Salinan kode adalah sebagai berikut:
var select = document.queryselector;
var treeref = select ('#tree');
// Di pohon com, leafef adalah simpul anak dari Treefre
var leafref = pilih ('#leaf');
var body = pilih ('body');
body.removechild (treeref);
//#pohon tidak dapat dibayar kembali karena treeref masih ada
//Larutan:
treeref = null;
// pohon belum bisa didaur ulang, karena hasil daunnya 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:
Salinan kode adalah sebagai berikut:
untuk (var i = 0; i <90000; i ++) {
var buggyObject = {
callAgain: function () {
var ref = ini;
var val = setTimeout (function () {
ref.callagain ();
}, 90000);
}
}
buggyObject.callagain ();
// Meskipun Anda ingin mendaur ulang, timer masih ada
buggyObject = null;
}
5) Debug Memory
Alat debugging memori Chrome sendiri dapat dengan mudah melihat penggunaan memori dan kebocoran memori:
Klik Rekam di Timeline -> Memori:
Untuk konten lebih lanjut, silakan periksa PPT asli.