HTML5 Canvas 调整内存泄漏 (Chrome)

Question

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

以下 sn-p 是我想要实现的简化版本。创建一个 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 中使用此机制？

Answer 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 毫秒，如果在调整大小之间没有发生调整大小将发生。如果发生新的调整大小，它将再次被推迟。

调整延迟以满足您的需要。

希望这会有所帮助！