3

キャンバスのパフォーマンスの低下の原因が描画自体にあるのか、それとも何をどこに描画すべきかを計算する基礎となるロジックにあるのか、どうすればわかりますか?

私の質問の 2 番目の部分は次のとおりです。キャンバス fps を計算する方法は? これが私がやった方法です。私には論理的に思えますが、私も絶対に間違っている可能性があります。これは正しい方法ですか？

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

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

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

編集: ネイサンのコメントによると、上記を次のように置き換えました。 

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

それで、これはどうですか？最後の更新以降のミリ秒単位の差のみを計算することもできます。パフォーマンスの差もそのように見ることができます。ちなみに、私もこの 2 つを並べて比較しましたが、通常はほとんど一緒に動きました (最大で 2 の違い) が、パフォーマンスが非常に低い場合、後者の方がスパイクが大きくなりました。

4

3 に答える 3

2

あなたのFPSコードは間違いなく間違っています

setInterval(checkFps, 1000);

この関数が毎秒正確に呼び出されることを誰も保証していません (1000 ミリ秒を超えるか、それ以下になる可能性がありますが、おそらくそれ以上になる可能性があります)。

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

間違っています (その時点で fps が 32 の場合、1.5 秒で 32 フレームになる可能性があります (極端な場合))。

より良いのは、最後の更新以降のリアルタイムパスを確認し、リアルタイムパス / フレームを計算することです (javascript には時間を取得する機能があると確信していますが、十分に正確かどうかはわかりません = ミリ秒以上)

fps は良い名前ではありません。1 秒あたりのフレーム数ではなく、(前回の更新以降の) フレーム数が含まれているため、frames の方が適切な名前です。

同じやり方で

setInterval(draw, 1000/30);

30 の FPS を達成したいので間違っていますが、setInterval はあまり正確ではないため (そして、おそらくあなたが言うよりも長く待機することになるため、CPU が負荷を処理できたとしても、低い FPS になることになります) )

于 2010-06-20T19:54:04.353 に答える
1

Webkit と Firebug はどちらも、javascript コードで CPU サイクルが費やされている場所を確認するためのプロファイリング ツールを提供します。そこから始めることをお勧めします。

FPSの計算については、あなたのコードがうまくいくとは思いませんが、良い推奨事項はありません:(

理由: ほとんどの (すべて?) ブラウザーは、javascript を実行するための専用スレッドと、UI 更新を実行するための別のスレッドを使用します。JavaScript スレッドがビジー状態の場合、UI スレッドはトリガーされません。

そのため、UI を 1000 回連続して「更新」する JavaScript ループ コードを実行できます (たとえば、テキストの色を設定するなど)。ただし、UI スレッドが変更をペイントできるように setTimeout を追加しない限り、 1000回の反復が完了するまで、変更は見られません。

そうは言っても、 draw() ルーチンの最後に fps カウンターを積極的にインクリメントできるかどうかはわかりません。確かに、JavaScript 関数は終了しましたが、ブラウザは実際に描画しましたか?

于 2010-06-20T18:56:56.440 に答える
1

プロジェクトのデバッグに innerHTML メソッドを使用していないかどうかを確認してください。これにより、想像もつかないほどプロジェクトが遅くなる可能性があります。特に、この innerHTML += newDebugValues; のような連結を行う場合はそうです。

または、desau が言ったように、firebug または webkit 内部デバッガーを使用して CPU 使用率をプロファイリングします。

于 2010-10-28T15:54:14.010 に答える