HTML5 Canvas调整内存泄漏(Chrome)

时间:2014-04-11 19:33:32

标签: javascript html5 google-chrome canvas

我正在开发一个基于HTML5的浏览器游戏,它有一个整页画布。这意味着画布的大小对应于窗口的尺寸。调整窗口大小时会更改宽度和高度,其效果类似于魅力。问题在于Chrome(34.0.1847.116):当您更改这些值时,会分配相当数量的虚拟内存,从而使应用程序变慢。在持续调整大小1-2分钟后,它使用了超过7 GB的内存。它不会显示在chrome :: // memory-redirect /'中,仅在任务管理器中显示。 IE11没有产生这种症状。

以下代码段是我尝试实现的简化版本。创建一个id为' test'的画布。并尝试调整窗口大小。分辨率越高,消耗的内存就越多。

var canvas = document.getElementById('test');
var ctx = canvas.getContext('2d');

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

window.addEventListener('resize', resize);

是否可以在Chrome中使用此机制?

1 个答案:

答案 0 :(得分:1)

您可以通过延迟调整大小本身来限制调整大小时事件处理的数量:

// must be in global scope
var canvas = document.getElementById('test');
var ctx = canvas.getContext('2d');

var delay;

function resize() {
    clearTimeout(delay);               // clear current timer if any
    delay = setTimeout(function() {    // new timer
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }, 260);
}

window.addEventListener('resize', resize);

当你现在调整大小时,实际调整大小会延迟,这里260毫秒,如果没有调整大小之间会发生调整大小。如果发生新的调整大小,它将再次被推迟。

根据您的需要调整延迟。

希望这有帮助!