JavaScript-də Yaddaş Sızıntısı — Necə Tapmaq və Düzəltmək

JavaScript-də Yaddaş Sızıntısı — Necə Tapmaq və Düzəltmək

Salam, developer dostum! Əgər sən də "niyə mənim React appim 10 dəqiqədən sonra lağ edir?" və ya "niyə Node.js serverim hər gün restart istəyir?" suallarını verirsənsə, bu məqalə sənin üçündür.

Bakıda bir çox startupda və outsource şirkətdə eyni problemi görürəm: developer-lər feature yazır, deadline-a çatır, amma performans heç kimin ağlına gəlmir. Sonra production-da istifadəçi şikayətləri başlayır. Tanış gəlir?

Gəl bu gün memory leak mövzusunu kökündən anlayaq.

Yaddaş Sızıntısı Nədir?

JavaScript-də garbage collector (GC) istifadə olunmayan obyektləri avtomatik silir. Memory leak odur ki, sən artıq istifadə etmədiyin bir obyektə hələ də referans saxlayırsan — GC onu silə bilmir, RAM dolur, tətbiq yavaşlayır və nəhayət crash edir.

Google-un 2024 Chrome DevTools statistikasına görə, front-end bug report-ların təxminən 30%-i performans və yaddaş problemləri ilə bağlıdır. Node.js tərəfdə isə memory leak-lər production incident-lərin ən gizli səbəblərindən biridir.

Ən Çox Rast Gəlinən 5 Memory Leak Səbəbi

1. Təmizlənməyən Event Listener-lər

Bu, ən klassik səhvdir. Xüsusilə SPA (Single Page Application) layihələrdə səhifə dəyişəndə listener-lər qalır.

javascriptKopyala
// ❌ SƏHV: Listener heç vaxt silinmir
function setupButton() {
  const button = document.getElementById('submit-btn');
  const handler = () => {
    console.log('Clicked!');
    // Böyük data obyektinə referans saxlayır
  };
  button.addEventListener('click', handler);
}

// ✅ DÜZGÜN: Cleanup funksiyası var
function setupButton() {
  const button = document.getElementById('submit-btn');
  const handler = () => console.log('Clicked!');
  button.addEventListener('click', handler);

  // Cleanup qaytarırıq
  return () => button.removeEventListener('click', handler);
}

2. Unudulan setInterval / setTimeout

Xüsusilə React component-lərdə useEffect içində başladılan timer-lər cleanup olunmasa, component unmount olandan sonra da işləyir.

javascriptKopyala
// ❌ SƏHV: Interval təmizlənmir
useEffect(() => {
  setInterval(() => {
    fetchNotifications(); // Hər 5 saniyə API call
  }, 5000);
}, []);

// ✅ DÜZGÜN: Cleanup var
useEffect(() => {
  const id = setInterval(() => {
    fetchNotifications();
  }, 5000);
  return () => clearInterval(id);
}, []);

3. Closure-ların Gizli Referansları

Closure daxilində böyük obyektlərə referans saxlamaq çox yayğın memory leak səbəbidir.

javascriptKopyala
// ❌ Böyük array closure içində "əsir" qalır
function processData() {
  const hugeArray = new Array(1000000).fill('Bakı');
  return function() {
    // hugeArray-ə birbaşa ehtiyac yoxdur,
    // amma closure onu saxlayır
    console.log('Processing done');
  };
}
const callback = processData(); // hugeArray GC oluna bilmir

4. Detached DOM Nodes

DOM-dan sildiyin element hələ də JavaScript dəyişənində referans olaraq qalırsa, GC onu silə bilmir.

javascriptKopyala
// ❌ SƏHV
const elements = [];
function addItem() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  elements.push(div); // Referans array-də qalır
}
function removeItem() {
  const div = elements[0];
  document.body.removeChild(div);
  // elements array-indən silmədik — detached DOM node!
}

// ✅ DÜZGÜN: Hər iki yerdən sil
function removeItem() {
  const div = elements.shift(); // Array-dən çıxart
  document.body.removeChild(div); // DOM-dan sil
}

5. Global Dəyişənlər və Console.log

Bunu çoxları bilmir: console.log() ilə çap etdiyiniz böyük obyektlər DevTools açıq olduqda GC olunmur. Production build-də console.log-ları silmək vacibdir.

javascriptKopyala
// ❌ Production-da olmamalıdır
console.log('User data:', massiveUserObject);

// ✅ Webpack/Vite plugin ilə avtomatik sil
// vite.config.js
export default defineConfig({
  esbuild: {
    drop: ['console', 'debugger'],
  },
});

Memory Leak-i Necə Tapmaq Olar?

Chrome DevTools sənin ən yaxşı dostundur. Addım-addım:

1. Chrome-da F12 → Memory tabına keç
2. Heap Snapshot seç və "Take snapshot" bas
3. Tətbiqdə şübhəli əməliyyatı bir neçə dəfə təkrarla (məsələn, modal aç-bağla)
4. Yeni snapshot al
5. Comparison görünüşündə iki snapshot-u müqayisə et
6. Delta sütununda artan obyektlərə bax — leak orada gizlənib

Node.js üçün isə bu əmr çox faydalıdır:

bashKopyala
# Node.js prosesinin heap dump-ını al
node --inspect server.js
# Chrome-da chrome://inspect açıb Memory tab-dan profil al

# Və ya process.memoryUsage() ilə monitor et
node -e "setInterval(() => console.log(process.memoryUsage()), 3000)"

Faydalı alətlər:

• Chrome DevTools Memory tab — front-end üçün №1
• clinic.js (npx clinic doctor) — Node.js üçün əla
• memlab (Meta/Facebook-un aləti) — avtomatik leak detection
• why-is-node-running — Node prosesinin niyə bitmədiyini göstərir

Real Dünya Ssenarisi: Bakı Startupından Nümunə

Təsəvvür et, sən Bakıda bir fintech startupda işləyirsən, maaşın 1500-2500 AZN arasıdır. React ilə dashboard yazırsan. Hər 3 saniyədən bir WebSocket ilə real-time data gəlir. Bir gün product manager deyir: "Tab 30 dəqiqə açıq qalanda browser donur."

Səbəb? WebSocket-in onmessage handler-ində gələn hər mesaj bir array-ə push olunur, amma heç vaxt silinmir:

javascriptKopyala
// ❌ Klassik real-time data leak
const allMessages = [];
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  allMessages.push(data); // Sonsuza qədər böyüyür!
  updateDashboard(data);
};

// ✅ Düzəldilmiş versiya: Son 100 mesajı saxla
const MAX_MESSAGES = 100;
const allMessages = [];
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  allMessages.push(data);
  if (allMessages.length > MAX_MESSAGES) {
    allMessages.shift(); // Köhnəni sil
  }
  updateDashboard(data);
};

Bu sadə shift() əlavəsi heap-in 500MB-dan 15MB-a düşməsini təmin edə bilər. Kiçik dəyişiklik, böyük nəticə.

Qaydalar — Hər Gün Yadda Saxla

• ✅ addEventListener varsa, mütləq removeEventListener yaz
• ✅ setInterval varsa, mütləq clearInterval yaz
• ✅ React-də useEffect-in cleanup funksiyasını HEÇ VAXT unutma
• ✅ Böyük array-lərin ölçüsünü limitlə
• ✅ Production-da console.log-ları sil
• ✅ Həftədə bir dəfə Memory tab ilə profil al

Nəticə

Memory leak mövzusu interview-lərdə də çıxır — xüsusilə senior pozisiya üçün müsahibə verəndə. Bakıda böyük şirkətlər (bank sektoru, e-commerce, fintech) bu biliyə dəyər verir. Bu mövzunu bilmək səni "kod yazan" developer-dən "production-ready kod yazan" mühəndisə çevirir.

DevTools-u aç, bir heap snapshot al, öz layihəndə yoxla. Bəlkə elə indi bir leak tapacaqsan.

Sualın varsa, şərhlərdə yaz — birlikdə debug edək! 🚀

---

Baku Stack — Azərbaycanlı developer-lər üçün, developer-lər tərəfindən. 31 mart 2026.