HTML5 Canvas内存泄漏性能问题

时间:2015-10-05 19:34:46

标签: html5 canvas memory-leaks html5-canvas web-worker

我有2个canvas元素,我以125毫秒的间隔绘制它们。

由于其工作性质,它们都必须完全重绘,因此不可能仅重新绘制它们的某些部分以提高性能。

问题

当我在任务管理器中看到时,工作集(记忆)会不断增加,这取决于我重新绘制画布的速度。

到目前为止我尝试了什么

  1. 使用clearRect进行清洁(而不是再次设置它的宽度)

  2. 尝试删除画布的父div并重新创建div并再次加载画布:这有助于减缓内存增加,但不会完全阻止它。

  3. 将不同的context.fills减少到尽可能少,但由于画布的性质,它仍然有很多。

  4. 即使我做了所有这些事情,工作集也可能很高,但不应该不断增加。

    有关如何控制内存泄漏的任何建议吗?

    更新 画布图纸中没有泄漏。我正在使用网络工作者将数据传递到画布,这在某处泄漏。对此感到抱歉!

2 个答案:

答案 0 :(得分:3)

使用clearRect是最好的选择。

为什么使用125ms重绘与requestAnimationFrame(这使用本机刻度,这也允许删除帧并帮助提高性能)

我会避免删除DOM元素,因为这非常昂贵。

内存总是会上升,我也会检查你的闭包,因为任何不在闭包中的东西都不会被自动垃圾收集,从而导致更多的内存使用。

结帐到statsjs会告诉你你的FPS并给你一些图表。还会Memory Stats显示内存消耗。

我猜你为什么看到这样的高峰是资源没有被垃圾收集,你的代码可以使用一些优化,但是没有看到任何在黑暗中发生的重大事件。

答案 1 :(得分:0)

尝试将动画循环包装在另一个初始化变量的函数中。这样就不会在循环中创建或销毁变量。



var aniTimeout = null;

function wrap() {
  
  var can = document.getElementById('can');
  var ctx = can.getContext('2d');
  var x = 0;
  var y = 0;
  var r = 5;
  var colors = ["#FF0000","#009900","#0000FF","#990099","#00CCCC","#FFCC00"];
  var cLen = colors.length;
  var ms = 125;
  
  function ani() {
    ctx.clearRect(0,0,50,200);
    ctx.clearRect(0,0,200,50);
    ctx.clearRect(150,0,200,150);
    ctx.clearRect(0,100,200,150);
    x = Math.floor(Math.random() * 190) + 5;
    y = Math.floor(Math.random() * 140) + 5;
    ctx.fillStyle = colors[Math.floor(Math.random() * cLen)];
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x,y,r,0,Math.PI*2);
    ctx.fill();
    aniTimeout = setTimeout(ani,ms);
  }
  
  ani();
  
}

wrap();

#can {
  border:1px solid #999999;
}

<canvas id="can" width="200" height="150"></canvas>
&#13;
&#13;
&#13;