Question

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

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

问题

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

到目前为止我尝试了什么

使用clearRect进行清洁（而不是再次设置它的宽度）
尝试删除画布的父div并重新创建div并再次加载画布：这有助于减缓内存增加，但不会完全阻止它。
将不同的context.fills减少到尽可能少，但由于画布的性质，它仍然有很多。

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

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

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

Answer 1

使用clearRect是最好的选择。

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

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

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

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

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

Answer 2

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

＆＃13;

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();

＆＃13;

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

＆＃13;

<canvas id="can" width="200" height="150"></canvas>

＆＃13;

HTML5 Canvas内存泄漏性能问题

2 个答案: