调整大小时 HTML5 Canvas 内存泄漏答案

【问题标题】：HTML5 Canvas memory leak on resize调整大小时 HTML5 Canvas 内存泄漏
【发布时间】：2014-12-04 21:12:40
【问题描述】：

我是一个基于 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();

有人知道吗？您知道为什么频繁调整画布大小会导致内存泄漏吗？主要问题是我无法以其他方式做到这一点，我需要找到答案或破解以释放内存......

【问题讨论】：

是什么让你认为你有内存泄漏？我在你的 jsfiddle 上用 Chrome 调试器运行了几个配置文件，没有发现任何明显的东西。

标签： javascript html canvas memory-leaks

【解决方案1】：

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

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

【讨论】：