Πώς θα διορθώνατε μια διαρροή μνήμης στον κώδικά σας…

Θα εντοπίζατε την πηγή διαρροής μνήμης χρησιμοποιώντας τα εργαλεία προγραμματιστή του προγράμματος περιήγησης (Timeline / Performance, Memory);

Συνηθισμένες αιτίες διαρροών μνήμης:

Εξαρτημένες αναφορές σε αντικείμενα:
- Ξεχασμένοι χρονοδιακόπτες (setInterval, setTimeout) που αναφέρονται σε αντικείμενα.
- Ασαφείς χειριστές συμβάντων που δεν αποσυνδέονται (removeEventListener).
- Κλεισίματα που διατηρούν εξωτερικές μεταβλητές περισσότερο από το απαραίτητο.
- Στοιχεία DOM που έχουν αφαιρεθεί από το έγγραφο αλλά εξακολουθούν να έχουν αναφορές στην JavaScript.

// Παράδειγμα διαρροής λόγω ξεχασμένου χρονοδιακόπτη
const leakyObject = {
  data: 'some data'
};

setInterval(() => {
  console.log(leakyObject.data); // το leakyObject δεν μπορεί να συλλεχθεί από τον συλλέκτη απορριμμάτων
}, 1000);

Μεγάλες δομές δεδομένων:
- Δημιουργία και αποθήκευση υπερβολικά μεγάλων πινάκων ή αντικειμένων όταν μπορούν να χρησιμοποιηθούν επαναλήπτες ή streaming.
Λανθασμένη χρήση cache:
- Cache που μεγαλώνει άπειρα χωρίς στρατηγική εκκένωσης (LRU, LFU κ.ά.).
Διαρροές από εξωτερικές βιβλιοθήκες:
- Ελέγξτε την τεκμηρίωση ή τον πηγαίο κώδικα των βιβλιοθηκών για πιθανά προβλήματα.

Επιδιόρθωση:

Ακύρωση συμβάντων και χρονοδιακόπτων: Βεβαιωθείτε ότι όλοι οι χειριστές συμβάντων αποσυνδέονται και οι χρονοδιακόπτες καθαρίζονται κατά τη διαγραφή του στοιχείου ή αντικειμένου.

// Σωστή καθαριότητα χρονοδιακόπτη
const leakyObject = {
  data: 'some data'
};
let timerId;

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

function stopTimer() {
  clearInterval(timerId); // Καθαρισμός χρονοδιακόπτη
}

Μηδενισμός αναφορών: Μηδενίστε ρητά τις αναφορές σε μεγάλα ή μη χρησιμοποιούμενα αντικείμενα ώστε ο συλλέκτης απορριμμάτων να μπορεί να τα συλλέξει.
Χρήση WeakMap και WeakSet: Για την αποθήκευση αναφορών σε αντικείμενα που μπορούν να διαγραφούν από τον συλλέκτη απορριμμάτων όταν δεν υπάρχουν άλλες ισχυρές αναφορές.
Βελτιστοποίηση δομών δεδομένων: Χρησιμοποιήστε πιο αποδοτικές δομές δεδομένων ή προσεγγίσεις (π.χ., lazy loading).
Περιορισμός μεγέθους cache: Εφαρμόστε στρατηγικές εκκένωσης.
Ενημέρωση ή αντικατάσταση βιβλιοθηκών: Αν το πρόβλημα βρίσκεται σε εξωτερική βιβλιοθήκη, ενημερώστε την ή βρείτε εναλλακτική.

Μετά τη διόρθωση, χρησιμοποιήστε ξανά τα εργαλεία προγραμματιστή για να επιβεβαιώσετε την απουσία διαρροών.

Πώς θα διορθώνατε μια διαρροή μνήμης στον κώδικά σας;