Memory Management di JavaScript

Memory leak adalah salah satu penyebab tersembunyi dari performance degradasi. Halaman yang awalnya cepat bisa jadi semakin lambat seiring waktu karena memory terus bertambah.

Detached DOM nodes dan listener yang masih hidup menahan referensi yang seharusnya di-GC. Dalam 1 jam penggunaan, halaman bisa membengkak dari 20MB ke 200MB+ sehingga browser tab menjadi sangat lambat atau crash.

Penyebab Umum Memory Leak

• Event listener tidak di-remove — Komponen yang unmount tapi listener masih aktif
• Detached DOM nodes — Elemen dihapus dari DOM tapi masih direferensikan JS
• Closure yang menyimpan referensi besar — Function scope menahan objek besar
• Timer tidak di-clear — setInterval tanpa clearInterval
• Global variables — Data yang tidak pernah di-garbage-collect

Contoh Memory Leak

// LEAK: event listener tidak pernah di-remove
function setupHandler() {
  const data = new Array(1000000).fill("x"); // 1M entries
  document.addEventListener("click", () => {
    console.log(data.length); // closure menahan data
  });
}

// FIX: cleanup
function setupHandler() {
  const data = new Array(1000000).fill("x");
  const handler = () => console.log(data.length);
  document.addEventListener("click", handler);
  return () => document.removeEventListener("click", handler);
}

Mendeteksi Memory Leak

Chrome DevTools → Memory tab:

1. Take heap snapshot
2. Lakukan aksi (navigasi, buka-tutup modal)
3. Take heap snapshot lagi
4. Compare — lihat objects yang bertambah tapi tidak seharusnya