JavaScript内存泄漏原理与IE浏览器下的解决方案

内存泄漏原理与现象分析

对原有示例进行了精简优化，使其结构更加紧凑。核心问题在于：当一个DOM元素包含对JavaScript对象（如事件处理函数）的引用，而该JavaScript对象又反向持有对该DOM元素的引用时，便形成了循环引用。这种结构在Internet Explorer浏览器中会导致内存无法被正确回收，从而引发内存泄漏。建议点击“运行代码”并打开任务管理器观察内存变化，对比IE8与Firefox的表现差异即可直观看出问题所在。

运行代码

<html>
<head>
<title>Memory leak</title>
<style>
body{
padding: 10px;
     }
</style>
</head>
<body>
</body>
<script>
var q = [];
var n = 0;
setInterval(function(){
q.push(makeSpan());
if(q.length>=10){
var s = q.shift();
if(s){
s.parentNode.removeChild(s);
        }
      }
n++;
},10);
function makeSpan(){
var s = document.createElement("span");
document.body.appendChild(s);
var t=document.createTextNode("*** " + n + " ***");
s.appendChild(t);
s.onclick=function(e){
s.style.backgroundColor="red";
alert(n);
            };
return s;
    };
</script>
</html>

IE浏览器下的修复方案

在删除节点时，若需手动打破循环引用，可对setInterval部分的代码进行微调。关键操作是在移除DOM节点前，将事件处理程序置为null，从而切断JS对象对DOM的引用。

setInterval(function(){
q.push(makeSpan());
if(q.length>=10){
var s = q.shift();
if(s){
s.onclick = null;//关键在这里
s.parentNode.removeChild(s);
    }
  }
n++;
},10);