使用requestAnimationFrame的HTML5游戲刷新率

Question

我正在使用HTML5 Canvas和JavaScript開發游戲。 初始fps不錯，但是隨着游戲的進行，fps會降低。 初始fps約為45 fps，但降低到5 fps。

以下是我的游戲循環

var last_draw = Date.now(); //To track when last time GameDraw was called last time
var fps;
function gameloop()
{
    var elapsed = Date.now() - last_draw;
    last_draw = Date.now()
    fps = 1000/elapsed;
    context.clearRect(0,0,canvas.height,canvas.width);// This function clears the canvas.
    GameUpdate();// This function updates property of all game elements.
    GameDraw(); //This function draws all visible game elements in the canvas.
    window.requestAnimationFrame(gameloop); //Requests next frame
}

window.requestAnimationFrame(gameloop); 

它已在以下瀏覽器中對此進行了測試：

1. Mozilla Firefox 32.0.3
2. 谷歌瀏覽器38.0.2125.101 m

我的問題是 ：

1. 為什么隨着比賽的持續進行，rAF的調用頻率降低了？
2. 是由於內存泄漏引起的嗎？
3. 是因為GameDraw和GameUpdate花費的時間很高嗎？
4. 執行Gamedraw功能的時間與實際在畫布中繪制元素所花費的時間不同。 Gamedraw調用每個游戲元素的draw函數。

Answer 1

您會發現很多有關優化畫布性能的在線教程。 這與使用“或那個”功能無關，而與每兩個幀之間發生的處理量有關。

由於您的問題沒有一個可靠的答案，因此我將簡要介紹每個子問題：

為什么隨着比賽的持續進行，rAF的調用頻率降低了？

就像您在下一個問題中猜到的那樣-有點泄漏：可能是從每個周期添加更多紋理，事件偵聽器，DOM對象等到所有由於堆積而已的JS對象堆積在一起的任何事情。被引用，因此垃圾收集器無法擺脫它們。 但最重要的是，您需要發現每兩幀之間發生了什么變化/增加。

是由於內存泄漏引起的嗎？

非常有可能，但如此容易測試。 在Chrome中， Shift + Escape可打開任務管理器，您可以在其中查看每個打開的標簽頁的內存，CPU等使用情況。 監視一下。

是因為GameDraw和GameUpdate花費的時間很高嗎？

明確地！ 這也可能導致內存泄漏。 學習做CPU和畫布配置文件，它將對您有很大幫助。 我認為Chrome中的畫布配置文件仍然是一項實驗性功能，因此您需要首先從config標志啟用它。 這兩個函數是99％的滯后來自何處，請調查發生了什么。

執行Gamedraw功能的時間與實際在畫布中繪制元素所花費的時間不同。 Gamedraw調用每個游戲元素的draw函數。

沒關系，因為它們都是阻塞代碼，這意味着一個只會在另一個之后發生。 渲染幀的時間大約是兩者的總和。 同樣，適當的畫布渲染優化可以在這里創造奇跡。