我正在尝试显示使用 DOM 元素(添加/删除它们)进行操作的动态可变数据。我发现几乎所有浏览器都有一个非常奇怪的行为:在我删除一个 DOM 元素然后添加一个新元素后，浏览器没有释放被删除的 DOM 项目占用的内存。请参阅下面的代码以了解我的意思。在我们运行此页面后，它将逐步占用多达 150 MB 的内存。谁能向我解释这种奇怪的行为？还是我做错了什么？
<!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>
最佳答案
我无法在 FF 3.6.8/Linux 上重现这一点，但是 200 毫秒的计时器对于那么多 DOM 重新渲染来说是相当小的。我在我的机器上注意到，当除了运行这个脚本之外做一些 JavaScript 密集型的事情时，比如在这个答案框中打字，内存使用量会增加，但当我停止打字时会再次释放(在我的例子中，大约 16% 的内存用法)。
我想在您的情况下，浏览器的垃圾收集器没有足够的“空闲时间”来实际从内存中删除这些节点。
关于javascript - 循环添加/删除 DOM 节点会导致 JavaScript 内存泄漏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3750797/