Inti Deteksi Memory Leak
Memory leak dalam JavaScript terjadi ketika objek yang tidak lagi diperlukan oleh aplikasi tetap tersimpan di memori karena masih memiliki referensi aktif. Deteksi dilakukan dengan memantau penggunaan heap memori melalui Chrome DevTools. Langkah utama adalah mengambil Heap Snapshot sebelum dan sesudah aksi tertentu, lalu membandingkan perbedaannya untuk menemukan objek yang tidak terhapus oleh Garbage Collector.
Langkah Teknis Menggunakan Chrome DevTools
- Buka Chrome DevTools (F12) dan navigasikan ke tab Memory.
- Pilih Heap snapshot dan klik Take snapshot untuk baseline.
- Lakukan interaksi pada aplikasi yang dicurigai menyebabkan kebocoran (misalnya membuka dan menutup modal berulang kali).
- Ambil snapshot kedua.
- Ganti tampilan dari 'Summary' ke 'Comparison' untuk melihat objek yang bertambah (delta) dan tidak terhapus.
Tabel Alat Deteksi Memory Leak
| Alat | Fungsi Utama | Kelebihan |
|---|---|---|
| Chrome DevTools | Analisis Heap & Profiling | Terintegrasi, tanpa instalasi tambahan |
| Node.js --inspect | Debugging aplikasi backend | Akses langsung ke V8 engine |
| MemLab (Meta) | Deteksi otomatis | Mampu menemukan kebocoran di aplikasi kompleks |
| Performance Monitor | Visualisasi real-time | Melihat tren penggunaan memori secara instan |
Penyebab Umum Kebocoran Memori
- Global Variables: Variabel yang dideklarasikan tanpa
var,let, atauconstakan menempel pada objekwindow. - Closures: Fungsi yang menyimpan referensi ke variabel di lingkup luar yang tidak lagi dibutuhkan.
- Event Listeners: Lupa menghapus
removeEventListenerpada elemen DOM yang sudah dihapus. - Detached DOM Nodes: Menyimpan referensi ke elemen DOM dalam variabel JavaScript setelah elemen tersebut dihapus dari dokumen.
Contoh Kode: Identifikasi Kebocoran Event Listener
// Buruk: Event listener tidak pernah dihapus
function attachHandler() {
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => console.log('Clicked'));
}
// Baik: Simpan referensi dan hapus saat tidak digunakan
const handler = () => console.log('Clicked');
const btn = document.getElementById('myBtn');
btn.addEventListener('click', handler);
// Saat elemen tidak lagi dibutuhkan:
btn.removeEventListener('click', handler);Tips Troubleshooting Lapangan
Jika aplikasi terasa melambat seiring waktu, gunakan Allocation Instrumentation on Timeline di tab Memory. Fitur ini akan merekam alokasi memori secara kontinu. Jika Anda melihat batang biru yang tidak berubah menjadi abu-abu (tidak terhapus) setelah aksi selesai, itulah titik kebocoran memori Anda. Fokuslah pada objek yang memiliki retaining path ke objek global atau window.