我正在开发一个基于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中使用此机制?
答案 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毫秒,如果没有调整大小之间会发生调整大小。如果发生新的调整大小,它将再次被推迟。
根据您的需要调整延迟。
希望这有帮助!