HTML5 Canvas調整內存泄漏大小（Chrome）

Question

我正在開發具有全頁畫布的基於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中使用這種機制嗎？

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毫秒。 如果發生新的調整大小，它將再次被推遲。

調整延遲以適合您的需求。

希望這可以幫助！