关于js内存泄露的一个好例子

  我把别人的例子改了一下,觉得这样写更紧凑!套用别人的原话,当一个DOM对象包含一个Js对象的引用(例如一个Event Handler), 而这个Js对象又持有对这个DOM对象的引用时,一个环状引用就行成了,于是在ie下就出现了内存泄露。点击“运行代码”并打开任务管理器看内存变化。分别在ie8和ff下测试,差距不用多说。

  运行代码

  

复制代码 代码如下:

  <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那段代码稍微改动以下:

  

复制代码 代码如下:

  setInterval(function(){

  q.push(makeSpan());

  if(q.length>=10){

  var s = q.shift();

  if(s){

  s.onclick = null;//关键在这里

  s.parentNode.removeChild(s);

  }

  }

  n++;

  },10);