Question

我花了几天时间搜索SO，谷歌搜索和阅读文章，我不能为我的生活找出如何避免内存泄漏。我写了一个快速演示，看看这里发生了什么：https://codepen.io/dotjersh/pen/WMVwWx。

var SelectMap = function(canvas,onComplete){
  var size = [3,3];
  var s = 39;//sidelength
  var p = 1; //padding
  var color = ['#3D5AFE','#F57F17']
  var ctx = canvas.getContext("2d");
  var cursor = null;
  
  canvas.width = size[0] * (s + p);
  canvas.height = size[1] * (s + p);
  
  canvas.addEventListener('mousemove',hover);
  canvas.addEventListener('click',click);
  
  render();
  
  function click(e){
    onComplete(Math.floor(cursor.x/(s + p)),Math.floor(cursor.y/(s + p)));
    destroy();
  }
  
  function hover(e){
    cursor = {x:Math.abs(e.clientX - canvas.offsetLeft),y:Math.abs(e.clientY - canvas.offsetTop)}
    render();
  }
  
  function render(){
    ctx.clearRect(0,0,canvas.width,canvas.height)
    for(var x = 0; x < size[0]; x++){
      for(var y = 0; y < size[1]; y++){
        ctx.fillStyle = color[0];
        if(cursor){
          var xPoint = ((x*s) + (x*p));
          var yPoint = ((y*s) + (y*p));
          
          if(Math.floor(cursor.x/(s + p)) == x && Math.floor(cursor.y/(s + p)) == y){
            ctx.fillStyle = color[1];
          }
          
        }
        
        ctx.fillRect((x*s) + (x*p),(y*s) + (y*p),s,s);
      }
    }
  }
  
  function destroy(){
    canvas.removeEventListener('mousemove',hover);
    canvas.removeEventListener('click',click);
    ctx.clearRect(0,0,canvas.width,canvas.height);
  }
  
  return{
    destroy: destroy,
  }
}

function go(){
  var bob = new SelectMap(document.getElementById('canvas'),function(x,y){
      alert(x + "," + y);
      bob = null;
    });
}

<canvas id="canvas"></canvas>

预期的结果是，一旦打开页面，就会存储内存的基本数量。您可以运行go()，并查看内存增加情况。单击某个对象后，该对象应从全局范围中删除。在chrome上我运行垃圾收集器，但之后使用的内存量没有变化。它应该返回到原始内存，如果不是吗？

我做过的一些事情： - 确保删除所有活动 - 将对象设置为null - 清除画布

我几天都在努力理解这一点，任何帮助都会受到赞赏。

Answer 1

归功于@JonasW。

他提到垃圾收集者只会收集数据，如果有数据需要收集，他们就不会获得数千字节的数据。我修改了我的codepen以创建25MB的无用数据，并最终工作。保存的codepen最终创建了每个类型go（）运行然后删除的数据的千字节数。这是打算每次运行时摆脱25MB的意图。

谢谢！

Javascript垃圾收集器无法清除对象

1 个答案: