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:
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>
Facendo un'analisi tramite la timeline di Chrome e creando/distruggendo gli ottetti più volte sembra distruggere tutto correttamente ed ottengo il seguente profilo:
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:
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>
E questo è il secondo profilo che ottengo:
2.jpg
Ora, cosa devo fare per rimuovere correttamente tutto?
Grazie in anticipo.