如何判斷導致HTML5 Canvas性能下降的原因？

如何判斷畫布的緩慢性能是否由繪圖本身或計算應繪製的內容邏輯以及在哪裏引起的？如何判斷導致HTML5 Canvas性能下降的原因？

我的問題的第二部分是：如何計算畫布的FPS？以下是我的做法，對我來說似乎合乎邏輯，但我也可能是絕對錯誤的。這是做到這一點的正確方法嗎？

var fps = 0; 
setInterval(draw, 1000/30); 
setInterval(checkFps, 1000); 

function draw() { 
    //... 
    fps++; 
} 

function checkFps() { 
    $("#fps").html(fps); 
    fps = 0; 
}

編輯： 我更換了上面下面，根據Nathan的評論：

var lastTimeStamp = new Date().getTime(); 
function draw() { 
    //... 
    var now = new Date().getTime(); 
    $("#fps").html(Math.floor(1000/(now - lastTimeStamp))); 
    lastTimeStamp = now; 
}

那麼這個怎麼樣？您也可以只計算自上次更新以來的差異，也可以看到性能差異。順便說一下，我也對這兩者進行了並排比較，他們通常幾乎一起移動（最多相差2），然而，當性能非常低時，後者的峯值更大。

來源

2010-06-20 Márton Borlay

Webkit和Firebug都提供了分析工具，以查看CPU週期在JavaScript代碼中的使用情況。我建議從那裏開始。

對於FPS計算，我不認爲你的代碼是去工作，但我沒有任何好推薦:(

原因是：大多數（？所有）瀏覽器使用專用線程運行javascript和一個不同的線程來運行UI更新如果Javascript線程正忙，UI線程不會被觸發

所以，你可以運行一些JavaScript循環代碼，它會「更新」UI 1000次（例如，設置某些文本的顏色） - 但除非添加setTimeout以允許UI線程繪製更改，否則直到1000次迭代完成後纔會看到任何更改。

這就是說，我不知道你是否可以在draw（）例程結束時自信地增加你的fps計數器。當然，你的javascript函數已經完成了，但瀏覽器實際上是否繪製了？

來源

2010-06-20 18:56:56 desau

你的FPS代碼肯定是不對的

setInterval(checkFps, 1000);

沒有人保證這個函數將被調用恰好每秒（它可能比1000ms的更多或更少 - 但可能更多），所以

function checkFps() { 
    $("#fps").html(fps); 
    fps = 0; 
}

是錯誤的（如果FPS是在那一刻有可能是你有32幀的1.5秒（極端情況下）32）

尤爲明顯是看到什麼是自上次更新實時傳遞並計算實時通過/幀（我相信JavaScript有功能來獲得時間，但我不知道它是否會足夠準確=毫秒或更好）

fps是btw不是一個好名字，它包含（自上次更新以來）的幀數，而不是每秒的幀數，所以幀將是更好的名稱。

以同樣的方式

setInterval(draw, 1000/30);

是錯誤的，因爲你要達到30 FPS，但是因爲setInterval的不是很準確（而且很可能將等待更長的時間比你說的，你會即使CPU能夠處理負載，結果也是較低的FPS）

來源

2010-06-20 19:54:04 Nathan

檢查是否不使用某些innerHTML方法來調試您的項目。這可能會以你無法想象的方式減慢你的項目，尤其是如果你像這樣進行一些連接innerHTML + = newDebugValues;

或者像desau說的那樣，用螢火蟲或webkit內部調試器來分析你的cpu使用情況。

來源

2010-10-28 15:54:14 762x51mm

如何判斷導致HTML5 Canvas性能下降的原因？

回答

相關問題