Apakah punca kebocoran memori dalam aplikasi JavaScript?

Kebocoran memori biasa dalam aplikasi JavaScript termasuk: 1. Rujukan pendengar peristiwa yang tidak betul. Sekiranya elemen DOM dikeluarkan tetapi peristiwa itu tidak dibatalkan, objek itu tidak boleh dikitar semula. Adalah disyorkan untuk membersihkan pendengar apabila komponen itu tidak dipasang; 2. Pemasa yang dilupakan dan tugas -tugas yang tidak segerak, seperti setInterval atau setTimeout yang tidak jelas, ia akan terus merujuk objek tersebut. Adalah disyorkan untuk memanggil ClearInterval atau ClearTimeout apabila memusnahkan komponen; 3 Jika cache tidak dibersihkan, pertumbuhan cache tanpa had akan menduduki banyak ingatan. Adalah disyorkan untuk menggunakan lemah atau melaksanakan mekanisme penghapusan LRU; 4. Rujukan yang disebabkan oleh penutupan boleh dikekalkan, dan fungsi dalaman secara tidak sengaja dapat mengekalkan pembolehubah luaran. Adalah disyorkan untuk menetapkannya kepada batal dalam masa atau mengelakkan rujukan objek besar. Menggabungkan tabiat pengekodan yang baik dan alat analisis memori dapat mencegah masalah ini dengan berkesan.

Punca kebocoran memori yang biasa dalam aplikasi JavaScript sebenarnya bukan isu -isu yang sangat rumit sepanjang masa, tetapi beberapa butiran yang mudah diabaikan semasa proses pembangunan. Sekiranya anda mendapati bahawa aplikasi telah menjadi semakin terperangkap selepas berlari untuk masa yang lama, atau halaman menduduki ingatan untuk bangkit, kemungkinan ada kebocoran memori.

Mari kita lihat beberapa sebab yang paling biasa dan bagaimana untuk mengelakkannya.

1. Rujukan pendengar peristiwa yang tidak betul

Ini adalah salah satu kebocoran memori yang paling biasa. Apabila kita mengikat peristiwa ke unsur -unsur DOM, jika fungsi panggil balik merujuk kepada pemboleh ubah atau objek luaran, dan unsur -unsur ini dikeluarkan dan peristiwa itu tidak secara manual tidak dapat dibatalkan, ia boleh menyebabkan objek ini dikumpulkan sampah.

Contohnya:

 const button = document.getElementById ('MyButton');
Button.AdDeventListener ('klik', () => {
    // Fungsi di sini boleh merujuk kepada beberapa pembolehubah luaran});

Jika butang ini kemudian dikeluarkan dari DOM tetapi removeEventListener tidak dipanggil, maka ia masih akan tetap dalam ingatan.

Cadangan:

• Ingatlah untuk membersihkan pendengar acara yang berkaitan apabila penyingkiran komponen atau penyingkiran elemen.
• Apabila menggunakan kerangka moden seperti React, berhati -hati untuk membersihkan kesan sampingan, seperti mengeluarkan pendengar dalam fungsi yang dikembalikan oleh useEffect .

2. Pemasa yang dilupakan dan tugas tidak segerak

setInterval atau setTimeout adalah satu lagi "lubang" yang biasa. Jika anda menetapkan pemasa dan fungsi panggilan baliknya merujuk objek atau komponen tertentu, walaupun komponen telah dimusnahkan, panggilan balik ini boleh terus melaksanakan dan memegang rujukan kepada objek tersebut.

Contohnya:

 fungsi startpolling () {
    const data = fetchData ();
    setInterval (() => {
        console.log (data); // Data tidak akan dikeluarkan}, 5000);
}

Sekiranya komponen tidak membersihkan pemasa selepas menyahpasang, ia akan terus berjalan sambil mengekalkan rujukan kepada data .

Cadangan:

• Gunakan clearInterval() atau clearTimeout() untuk membersihkan pemasa apabila komponen dipasang atau tidak lagi diperlukan.
• Untuk sering dicetuskan operasi asynchronous (seperti pengundian), anda boleh mempertimbangkan menggunakan kaedah gelung async/menunggu dan ditamatkan ketika keluar dari gelung.

3. Cache tidak dibersihkan

Kadang -kadang kita menggunakan cache untuk meningkatkan prestasi, seperti menjimatkan dan menggunakan semula beberapa hasil pengiraan. Tetapi jika cache tidak mengehadkan saiz atau tidak membersihkan data lama, ia juga boleh menyebabkan memori terus berkembang.

Contohnya:

 const Cache = {};
fungsi getExpenSivedata (kunci) {
    jika (! Cache [key]) {
        cache [kekunci] = ComputeData (kekunci);
    }
    kembali cache [kunci];
}

Sebagai kunci menjadi semakin banyak, cache akan menjadi lebih besar dan akhirnya menduduki banyak ingatan.

Cadangan:

• Gunakan struktur rujukan yang lemah, seperti WeakMap atau WeakSet , secara automatik melepaskan nilai kunci apabila ia adalah objek.
• Melaksanakan mekanisme penghapusan cache, seperti caching LRU.
• Secara kerap periksa sama ada dasar cache adalah munasabah dan sama ada terdapat residensi data yang tidak berguna jangka panjang.

4. Rujukan yang disebabkan oleh penutupan

Penutupan adalah ciri -ciri kuat JavaScript, tetapi mereka juga boleh menyebabkan kebocoran memori jika digunakan secara tidak sengaja. Sebagai contoh, fungsi dalaman merujuk kepada pembolehubah dalam skop luaran, dan fungsi ini dikekalkan untuk masa yang lama (seperti panggilan balik, pemprosesan acara, dll.), Yang akan menghalang pemboleh ubah luaran daripada dikitar semula.

Contoh:

 persediaan fungsi () {
    const largedata = array baru (10000) .fill ('kebocoran');
    fungsi kembali () {
        Console.log ('Hello');
        // Largedata dikhaskan oleh penutupan};
}

Walaupun fungsi yang dikembalikan tidak menggunakan largeData secara langsung, ia masih akan dikekalkan kerana ia berada dalam rantaian skop yang sama.

Cadangan:

• Untuk menjelaskan pembolehubah mana yang diperlukan, tetapkannya untuk null atau menetapkan semula mereka pada waktunya.
• Elakkan secara tidak sengaja mengekalkan objek besar dalam penutupan.
• Menganalisis logik kod untuk melihat sama ada terdapat rujukan pembolehubah yang tidak perlu.

Pada dasarnya itu sahaja. Masalah kebocoran memori sering tidak ditemui sekaligus, terutamanya dalam projek besar. Kuncinya adalah untuk membangunkan tabiat pengekodan yang baik dan kerap melakukan analisis memori dengan alat (seperti panel memori Chrome Devtools), begitu banyak masalah boleh didedahkan terlebih dahulu.

Atas ialah kandungan terperinci Apakah punca kebocoran memori dalam aplikasi JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!