L’impostazione di innerHTML aumenta il nodecount HTML

Spiega il problema

Quindi ho notato che usando un someElement.innerHTML il numero di nodes DOM aumenta.

inserisci la descrizione dell'immagine qui

Immagino che il riferimento venga ucciso ma la memoria è ancora assegnata fino a quando il garbage collector elimina l’object.


Esempio (HTML):

         
Time Goes Here

Esempio (JavaScript):

  var timer; var body; var oldTime = ""; var timeContainer; function startTimer(){ timeContainer = document.getElementById("timeContainer"); timer = setInterval(getTime, 10); } function getTime(){ var d = new Date(); var timeString = d.getUTCHours() +":"+ d.getUTCMinutes(); +":"+ d.getUTCSeconds(); if(timeString != oldTime){ oldTime = timeString; timeContainer.innerHTML = timeString; } } 

Quello che ho provato finora

  • Ho provato a usare someElement.textContent .
  • Ho eliminato whoe ParentElement ogni volta che aggiorna il timer e ne ho creato uno nuovo

Domanda

Come posso evitare di aumentare il conteggio dei nodes anche una volta quando sto solo aggiornando il contenuto e perché ha bisogno di un nodo aggiuntivo comunque?

Immagino che il riferimento venga ucciso ma la memoria è ancora assegnata fino a quando il garbage collector elimina l’object.

Corretta.

Come posso evitare di aumentare il conteggio dei nodes anche una volta quando sto semplicemente aggiornando il contenuto?

Non puoi, né dovresti preoccuparti di questo. Questo è il dominio del browser, fa ciò che vuole fare quando si tratta di garbage collection (e diversi browser potrebbero farlo in modo diverso).

Ho eliminato l’intero ParentElement ogni volta che aggiorna il timer e ne ho creato uno nuovo

Solo perché l’hai cancellato (reso inaccessibile), non significa che sia stato raccolto automaticamente.

Questo è naturale e atteso.

La garbage collection dei browser viene eseguita in modo asincrono. Non appena il tuo attuale DOM ha staccato i nodes, non è garantito che siano liberi da heap. Rimarranno lì fino al successivo innesco della raccolta dei rifiuti.

Come detto negli strumenti di sviluppo # Risolvi i problemi di memoria , non ti preoccupare e lascia il processo di garbage collection.

Tieni presente che, lasciatelo a GC purché non danneggi le prestazioni delle tue applicazioni. Se ti sta davvero spingendo verso il browser lento e pasticcio, dovresti davvero iniziare a profilarlo e correggerlo. Potrebbe essere una potenziale perdita di memoria.

Un nodo DOM può essere garbage collector quando non ci sono riferimenti ad esso dal tree DOM della pagina o dal codice JavaScript. Si dice che un nodo è “staccato” quando viene rimosso dall’albero DOM ma alcuni JavaScript lo fanno ancora riferimento. I nodes DOM stacchi sono una causa comune di perdite di memoria. Questa sezione ti insegna come usare i profiler heap di DevTools per identificare i nodes staccati.

E la correzione è fornita nello stesso articolo utilizzando gli strumenti di Chrome Dev. In breve, prendi istantanee del tuo heap e inizia a guardare i nodes separati.

inserisci la descrizione dell'immagine qui

I nodes evidenziati in giallo hanno riferimenti diretti ad essi dal codice JavaScript. I nodes evidenziati in rosso non hanno riferimenti diretti. Sono vivi solo perché fanno parte dell’albero del nodo giallo. In generale, vuoi concentrarti sui nodes gialli. Correggi il tuo codice in modo che il nodo giallo non sia vivo più a lungo di quanto debba essere, e ti sbarazzi anche dei nodes rossi che fanno parte dell’albero del nodo giallo.

Leggi di più ..