Beberapa aspek yang mudah menyebabkan kebocoran memori JavaScript_petua javascript

Diterbitkan dalam Google WebPerf (London WebPerf Group), 26 Ogos 2014.

Aplikasi web JavaScript yang cekap mestilah lancar dan pantas. Mana-mana aplikasi yang berinteraksi dengan pengguna perlu mempertimbangkan cara memastikan memori digunakan dengan cekap, kerana jika terlalu banyak digunakan, halaman akan ranap, memaksa pengguna memuat semula. Dan anda hanya boleh bersembunyi di sudut dan menangis.

Pengumpulan sampah automatik bukan pengganti untuk pengurusan memori yang berkesan, terutamanya dalam aplikasi web yang besar dan berjalan lama. Dalam kuliah ini, kami akan menunjukkan cara mengurus memori dengan berkesan melalui DevTools Chrome.

Dan pelajari cara menyelesaikan masalah prestasi seperti kebocoran memori, pengumpulan sampah yang kerap dijeda dan kemerosotan memori keseluruhan, perkara yang benar-benar membunuh anda.

Addy Osmani menunjukkan banyak contoh kebocoran memori dalam Chrome V8 dalam PPTnya:

1) Padam sifat Objek akan melambatkan objek (memakan 15 kali lebih banyak memori)

Salin kod Kod adalah seperti berikut:

var o = { x: 'y' };
padam o.x; //Pada masa ini o akan menjadi objek perlahan
o.x; //

var o = { x: 'y' };
o = null; //Sepatutnya begini

2) Penutupan

Apabila pembolehubah di luar penutupan diperkenalkan dalam penutupan, objek tidak boleh dikumpul sampah (GC) apabila penutupan tamat.

Salin kod Kod adalah seperti berikut:

var a = function() {
var largeStr = New Array(1000000).join('x');
kembalikan fungsi() {
Kembalikan largeStr;
}
}();

3) DOM bocor

Apabila COM asal dialih keluar, rujukan nod anak tidak boleh dikitar semula melainkan ia dialih keluar.

Salin kod Kod adalah seperti berikut:

var pilih = document.querySelector;
var treeRef = pilih('#tree');

//Dalam pokok COM, leafRef ialah nod anak treeFre
var leafRef = pilih('#leaf'); var body = pilih('body');

body.removeChild(treeRef);

//#pokok tidak boleh dikitar semula kerana treeRef masih ada

//Penyelesaian:
treeRef = null;

//Pokok itu belum boleh dikitar semula kerana daun hasil leafRef masih ada

leafRef = null;

//Kini #pokok boleh dilepaskan.

4) Kebocoran pemasa

Pemasa juga merupakan tempat biasa di mana kebocoran memori berlaku:

Salin kod Kod adalah seperti berikut:

untuk (var i = 0; i < 90000; i ) {
var buggyObject = {
​ callAgain: function() {
var ref = ini;
var val = setTimeout(function() {
ref.callAgain();
}, 90000);
}
}

buggyObject.callAgain();

//Walaupun anda ingin mengitar semula, pemasa masih ada
buggyObject = null;
}

5) Nyahpepijat memori

Alat penyahpepijatan memori terbina dalam Chrome boleh menyemak penggunaan memori dan kebocoran memori dengan mudah:

Klik rekod dalam Garis Masa -> Memori:
Untuk maklumat lanjut, sila lihat

PPT asal.