我有2个canvas
元素,我以125毫秒的间隔绘制它们。
由于其工作性质,它们都必须完全重绘,因此不可能仅重新绘制它们的某些部分以提高性能。
问题
当我在任务管理器中看到时,工作集(记忆)会不断增加,这取决于我重新绘制画布的速度。
到目前为止我尝试了什么
使用clearRect进行清洁(而不是再次设置它的宽度)
尝试删除画布的父div并重新创建div并再次加载画布:这有助于减缓内存增加,但不会完全阻止它。
将不同的context.fills减少到尽可能少,但由于画布的性质,它仍然有很多。
即使我做了所有这些事情,工作集也可能很高,但不应该不断增加。
有关如何控制内存泄漏的任何建议吗?
更新 画布图纸中没有泄漏。我正在使用网络工作者将数据传递到画布,这在某处泄漏。对此感到抱歉!
答案 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;