Question

我是基于javascript / canvas 2d的库的主程序员。为了提供缓存某些内容的可能性，我实现了基于画布的缓存系统。每个DisplayObject都有自己的画布，以便缓存其渲染。

这里的主要问题是我在画布调整大小时检测到内存泄漏。我写了 jsfiddle 来说明问题。

function draw()
{

    var canvas = document.getElementById("tomahawk");
    var context = null;

    canvas.width = parseInt(Math.random() * 800);
    canvas.height = parseInt(Math.random() * 600);

    context = canvas.getContext("2d");

    context.clearRect(0,0,canvas.width,canvas.height);
    context.save();
    context.beginPath();
    context.fillStyle = "red";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.fill();
    context.restore();

    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame = (function()
{

    return  window.requestAnimationFrame       ||  //Chromium 
            window.webkitRequestAnimationFrame ||  //Webkit
            window.mozRequestAnimationFrame    || //Mozilla Geko
            window.oRequestAnimationFrame      || //Opera Presto
            window.msRequestAnimationFrame     || //IE Trident?
            function(callback, element){ //Fallback function
                window.setTimeout(callback, parseInt(1000/60));                
            }

})();

draw();

有人有线索吗？你知道为什么高频率调整画布会导致内存泄漏吗？主要的问题是，我无法以另一种方式做到这一点，我需要找到答案或黑客才能释放记忆......

Answer 1

通过在紧密循环中调整画布大小来保持浏览器忙碌，同时可能阻止GC（垃圾收集）完成其工作，删除那些未引用的内存分配。

给浏览器一些喘息的空间（移动电池驱动设备上的用户也会欣赏这一点）。如果您经常需要调整画布大小而不是重用/共享它，您应该考虑稍微更改代码模式，因为这表示设计缺陷，而不是浏览器。我2美分..

调整大小时HTML5 Canvas内存泄漏

1 个答案: