Question

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

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

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

根据您的需要调整延迟。

希望这有帮助！

HTML5 Canvas调整内存泄漏（Chrome）

1 个答案: