Kodunuzda bir bellek sızıntısını nasıl düzeltirsiniz?

Tarz edersiniz, tarayıcı geliştirici araçlarıyla (Timeline / Performance, Memory) sızıntı kaynağını tanımlayabilir misiniz?

Yaygın bellek sızıntısı nedenleri:

• Asılı nesne referansları:
  • Unutulan zamanlayıcılar (setInterval, setTimeout) nesnelere referans verir.
  • Bağlantısı kesilmeyen olay işleyicileri (removeEventListener).
  • Gereğinden uzun süre dış değişkenleri tutan kapanışlar.
  • Belge dışına çıkarılan DOM öğeleri, ancak JavaScript'te referanslar kalmış.

// Unutulan zamanlayıcı nedeniyle sızıntı örneği
const leakyObject = {
  data: 'some data'
};

setInterval(() => {
  console.log(leakyObject.data); // leakyObject çöp toplayıcı tarafından toplanamaz
}, 1000);

• Büyük veri yapıları:
  • Döngü veya streaming ile halledilebilecek büyük diziler veya nesneler oluşturmak ve saklamak.
• Önbelleklerin yanlış kullanımı:
  • Sonsuz büyüyen önbellekler (LRU, LFU vb.)
• Üçüncü taraf kütüphanelerinden sızıntılar:
  • Kütüphanelerin dokümantasyonunu veya kaynak kodunu potansiyel sorunlar için kontrol edin.

Düzeltme:

1. Olayları ve zamanlayıcıları iptal edin: Tüm olay işleyicilerin bağlantısının kesildiğinden ve zamanlayıcıların temizlendiğinden emin olun.

// Doğru zamanlayıcı temizleme
const leakyObject = {
  data: 'some data'
};
let timerId;

function startTimer() {
  timerId = setInterval(() => {
    console.log(leakyObject.data);
  }, 1000);
}

function stopTimer() {
  clearInterval(timerId); // Zamanlayıcıyı temizle
}

2. Referansları null yapın: Büyük veya kullanılmayan nesnelere referansları açıkça null yaparak çöp toplayıcının onları toplamaya imkan tanıyın.
3. WeakMap ve WeakSet kullanımı: Çöp toplayıcı tarafından kaldırılabilecek nesneler için referanslar saklayın.
4. Veri yapılarını optimize edin: Daha verimli yapılar veya yaklaşımlar kullanın (örneğin, tembel yükleme).
5. Önbellek boyutunu sınırlayın: Çıkartma stratejileri uygulayın.
6. Kütüphaneleri güncelleyin veya değiştirin: Üçüncü taraf kütüphane sorunluysa, güncelleyin veya alternatif arayın.

Düzeltmeden sonra, sızıntı olmadığını doğrulamak için geliştirici araçlarını tekrar kullanın.