2026.07.10.
Kódolás, keretrendszerek

DevTools JavaScript memóriaszivárgások felderítése

Temesvári László

A rejtett memóriaszivárgások: hogyan kutatjuk ki a böngészőben?

Szia! Gondolom, te is szembesültél már azzal a furcsa jelenséggel, hogy a felhasználó bejelenti: “lassú az oldal”, vagy “összeomlik a böngészőm”, de te a kódodat nézegetve nem találsz semmi látványos hibát. A tettes gyakran egy memóriaszivárgás – egy olyan hiba, amikor a JavaScript kódunk folyamatosan foglal memóriát, de soha nem adja vissza a rendszernek. Idővel ez teljesen le tudja foglalni a rendelkezésre álló memóriát, ami teljesítményromláshoz, majd összeomláshoz vezet.

Mi is az a memóriaszivárgás JavaScriptben?

Egyszerűen fogalmazva: memóriaszivárgás akkor történik, amikor a kódunk olyan objektumokat tart referenciában, amelyekre már nincs szükség, de a JavaScript garbage collectora nem tudja felszabadítani őket, mert valahonnan még “élő” a kapcsolat. Mintha egy szobát folyamatosan teleraknál bútorokkal, de soha nem vinnél ki belőle semmit – egyszerűen nem férsz majd be.

A böngészők modern eszközöket, így a Chrome DevTools Memory profilerét biztosítanak a probléma felkutatásához. Ne ijedj meg a komplexnek tűnő felülettől – néhány alapelv ismeretében hatékonyan használható.

Gyakori buktatók, amikbe mindenki belefut

Nézzünk meg egy klasszikus példát, amikor globális változókba gyűjtünk adatokat, és soha nem töröljük:

var gyujtemeny = [];

function adatotGyujt(esemeny) {
    // Minden eseménykor betesszük a teljes eseményobjektumot a tömbbe
    gyujtemeny.push({
        esemeny: esemeny,
        idobelyeg: new Date(),
        // ... és még sok más adat
    });
    // Feldolgozás...
}

// Egy eseményfigyelő, ami mindig hívódik
document.addEventListener('mousemove', adatotGyujt);

Itt a probléma egyértelmű: a gyujtemeny tömb folyamatosan nő, mert minden egyes egérmozdulatnál új objektumot rakunk bele. Soha nem távolítunk el belőle semmit. Ha az oldalon marad a felhasználó, a memóriafogyasztás órák alatt akár több száz megabájt is lehet.

De a való életben a dolgok ritkán ilyen nyilvánvalóak. A rejtettebb szivárgások gyakran az elkobzott DOM elemek környékén bukkannak elő. Például, amikor DOM elemekre tárolunk adatokat, de magát az elemet eltávolítjuk:

var cache = {};

function elemetFeldolgoz(elementId) {
    var elem = document.getElementById(elementId);
    // Eltároljuk az elemmel kapcsolatos nehéz adatokat
    cache[elem.id] = {
        element: elem,
        nehezAdat: new Array(100000).join('x') // Nagyméretű adat
    };
    // Később eltávolítjuk az elemet a DOM-ból
    elem.parentNode.removeChild(elem);
}

A DOM elem eltávolításra került, de a cache objektumban még mindig van egy referencia rá. Ez megakadályozza, hogy a JavaScript motor felszabadítsa az elemhez tartozó memóriát.

Hogyan használjuk a DevTools-ot a nyomozáshoz?

A Chrome DevTools Memory fülén két fő eszköz áll rendelkezésünkre:

1. Heap snapshot: A memória pillanatképe egy adott ponton. Kettőt készítve (pl. egy művelet előtt és után) és összehasonlítva láthatjuk, mely objektumok maradtak a memóriában. 2. Allocation instrumentation on timeline: Valós időben mutatja, hogy hol foglalódik új memória. Ideális, ha egy ismétlődő művelet során figyeljük a szivárgást.

A lényeg: próbáld reprodukálni a gyanús helyzetet (pl. nyisd meg és zárd be egy modális ablakot 10-szer), közben figyeld az allokációkat. Ha minden egyes ciklus után ugyanazok az objektumok maradnak a memóriában, valószínűleg szivárgás van.

Egy tipikus PHP-jQuery-Bootstrap forgatókönyv

Képzelj el egy admin felületet, ahol PHP-ból listázunk elemeket, és jQuery-vel lehetőség van mindegyikre külön modal-t nyitni. Itt könnyen előfordulhat memóriaszivárgás, ha nem takarítjuk fel az eseménykezelőket:

<?php
// backend.php - Egyszerűsített példa
$termekek = ['asztal', 'szék', 'lámpa'];
foreach ($termekek as $id => $termek):
?>
<div class="card m-2" data-termek-id="<?= $id ?>">
    <div class="card-body">
        <h5 class="card-title"><?= htmlspecialchars($termek) ?></h5>
        <button class="btn btn-primary modal-nyitas" 
                data-termek="<?= $termek ?>">
            Részletek
        </button>
    </div>
</div>
<?php endforeach; ?>
// frontend.js - Potenciális szivárgással
$(document).ready(function() {
    // Rossz minta: minden gombnyomáskor új eseményfigyelőt regisztrálunk
    $('.modal-nyitas').on('click', function() {
        var termek = $(this).data('termek');
        // Létrehozunk egy modal tartalmat dinamikusan
        var modalContent = $('<div class="modal-body"></div>')
            .append('<h4>' + termek + '</h4>')
            .append('<p>Ez egy hosszú leírás...</p>');
        
        // Megjelenítés, majd eltávolítás
        $('#modal-container').html(modalContent).modal('show');
        
        // Probléma: az eseménykezelő nem szűnik meg, ha a modal bezárul!
    });
});

A probléma itt az, hogy minden egyes .modal-nyitas gombra kattintáskor az eseménykezelő lefut, és bár a modal tartalma eltűnik, a funkcióban létrehozott closure-ök (zárványok) hivatkozhatnak a DOM elemekre, megakadályozva a felszabadítást.

Hogyan javítsuk ki?

// frontend.js - Javított változat
$(document).ready(function() {
    // 1. Delegáljuk az eseménykezelést egy statikus szülő elemre
    $(document).on('click', '.modal-nyitas', function() {
        var termek = $(this).data('termek');
        var modalContent = $('<div class="modal-body"></div>')
            .append('<h4>' + termek + '</h4>')
            .append('<p>Ez egy hosszú leírás...</p>');
        
        $('#modal-container').html(modalContent).modal('show');
    });
    
    // 2. A modal bezárásakor expliciten takarítsunk fel
    $('#modal-container').on('hidden.bs.modal', function() {
        $(this).empty(); // Eltávolítja a gyermek elemeket és azokhoz kapcsolódó eseményeket
    });
});

CSS/SCSS és a memória

Míg a CSS szabályok önmagukban általában nem okoznak memóriaszivárgást, a dinamikusan hozzáadott és el nem távolított osztályok, vagy a @keyframes animációk végtelen ciklusban való használata szintén terhelheti a renderelőmotort. Egy jól strukturált SCSS segíthet átláthatóbb stílusok írásában, ami könnyebbé teszi a dinamikus osztálykezelés hibáinak felderítését.

// _modal.scss - Átlátható struktúra könnyebb karbantartásért
.modal-container {
    &__content {
        padding: 1rem;
        // Explicit méretek segítenek a layout számításokban
        width: 100%;
        height: auto;
    }
    
    // Bezárás utáni állapot
    &.hidden {
        display: none;
        // Fontos: az animációk leállítása
        animation: none;
    }
}

Összegzés

A memóriaszivárgások kiküszöbölése nem varázslat, hanem rendszeres higiénia. A legfontosabb lépések:

* Kövesd a referenciákat: Gondolkodj el azon, hol tárolod az objektumokat, és hogyan szabadulnak fel. * Használd a DevTools Memory profilerét gyanús helyzetek reprodukálásával. * Takaríts fel mindent, amit létrehozol – különösen az eseményfigyelőket és a DOM referenciákat. * Teszteld hosszú ideig futó munkamenetekben – néha csak 10-15 perc után bukkan fel a probléma.

Ne parázz a memóriaszivárgásoktól. Mindenki hibázik, a lényeg, hogy a fejlesztői eszköztáradban legyen egy hatékony “nyomozókészlet” a felderítésükre. Legközelebb, amikor a felhasználó panaszol egy lassulást, már tudod, hol kezdjed a kivizsgálást.

Ha van kérdésed a DevTools konkrét funkcióival kapcsolatban, vagy találtál egy trükkös szivárgást, írd meg kommentben!

Kapcsolódó cikkek