A adição / remoção cíclica de nós DOM causa vazamentos de memória em JavaScript?
Estou tentando exibir dados dinamicamente alteráveis manipulando com elementos DOM (adicionando / removendo-os). Eu descobri um comportamento muito estranho de quase todos os navegadores: depois que removi um elemento DOM e adicionei um novo, o navegador não está liberando a memória obtida pelo item DOM removido. Veja o código abaixo para entender o que quero dizer. Depois de rodarmos esta página, ela consumirá até 150 MB de memória passo a passo. Alguém pode me explicar esse comportamento estranho? Ou talvez eu esteja fazendo algo errado?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function redrawThings() {
// Removing all the children from the container
var cont = document.getElementById("container");
while ( cont.childNodes.length >= 1 ) {
cont.removeChild(cont.firstChild);
}
// adding 1000 new children to the container
for (var i = 0; i < 1000; i++) {
var newDiv = document.createElement('div');
newDiv.innerHTML = "Preved medved " + i;
cont.appendChild(newDiv);
}
}
</script>
<style type="text/css">
#container {
border: 1px solid blue;
}
</style>
</head>
<body onload='setInterval("redrawThings()", 200);'>
<div id="container"> </div>
</body>
</html>