Bunasera a tutti.
Avrei un problema: ho una pagina dinamica che crea e distrugge ad ogni ciclo centinaia di oggetti DOM e sembra che la memoria, anzichè restare stabile, continui a crescere
Per test ho creato una questa pagina html:
Facendo un'analisi tramite la timeline di Chrome e creando/distruggendo gli ottetti più volte sembra distruggere tutto correttamente ed ottengo il seguente profilo:codice:<html> <head> <script> var lfCreate = function(){ var loDiv = document.getElementById( "loDiv" ); for( var i = 0; i < 1000; i ++ ){ var loNewDiv = document.createElement( "div" ); loNewDiv.innerHTML = "div nr." + ( loDiv.children.length + 1 ); loDiv.appendChild( loNewDiv ); loNewDiv = null; } loDiv = null; }; var lfRemove = function(){ var loDiv = document.getElementById( "loDiv" ); for( var i = loDiv.children.length - 1; i >= 0; i -- ){ var loOldDiv = loDiv.children[i]; loOldDiv.innerHTML = ""; loDiv.removeChild( loOldDiv ); loOldDiv = null; } loDiv = null; }; </script> </head> <body> <button onclick = "lfCreate()">create</button> <button onclick = "lfRemove()">remove</button> <div id = "loDiv"></div> </body> </html>
1.jpg
Ora, aggiungendo un evento di onclick ad ogni div che creo e rimuovendolo nel momento in cui distruggo il div, sembra che qualcosa continui a restare in memoria.
Questo è il secondo codice di esempio:
E questo è il secondo profilo che ottengo:codice:<html> <head> <script> var lfOnClickFunction = function(){ console.log( "Hello World!" ); }; var lfCreate = function(){ var loDiv = document.getElementById( "loDiv" ); for( var i = 0; i < 1000; i ++ ){ var loNewDiv = document.createElement( "div" ); loNewDiv.innerHTML = "div nr." + ( loDiv.children.length + 1 ); loNewDiv.addEventListener( "click", lfOnClickFunction ); loDiv.appendChild( loNewDiv ); loNewDiv = null; } loDiv = null; }; var lfRemove = function(){ var loDiv = document.getElementById( "loDiv" ); for( var i = loDiv.children.length - 1; i >= 0; i -- ){ var loOldDiv = loDiv.children[i]; loOldDiv.innerHTML = ""; loOldDiv.removeEventListener( "click", lfOnClickFunction ); loDiv.removeChild( loOldDiv ); loOldDiv = null; } loDiv = null; }; </script> </head> <body> <button onclick = "lfCreate()">create</button> <button onclick = "lfRemove()">remove</button> <div id = "loDiv"></div> </body> </html>
2.jpg
Ora, cosa devo fare per rimuovere correttamente tutto?
Grazie in anticipo.


Rispondi quotando