Javascriptゲームループ

JavaScriptループに関するいくつか質問があります。

質問:

  • JavaScriptループでブラウザがフリーズするのはなぜですか?
  • 描画が遅いのはなぜですか?1msごとに描画が1回実行されていても、最も簡単な描画です!
  • 解決策は何ですか?フラッシュが死んでいる、今何をしているの?

あなた自身のために試みるキャンバスコードはここにあります:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    
    <script type="text/javascript">

        var c = document.getElementById( 'c' );

        ctx = c.getContext( '2d' );

        var x = 100;

        ctx.fillStyle= '#f00';

        function loop()
        {
            ctx.fillRect( x, 100, 20, 20 );

            ++x;
        }

        setInterval( loop, 1 );
    </script>
</body>
</html>
2
@AustinHenleyより適切なツールであるため、HTML5に置き換えられます
追加された 著者 Raynos,
フラッシュは死んでいない。
追加された 著者 Austin Henley,
あなたのコンピュータはどのようにビーストですか?強すぎるとは思わない
追加された 著者 ExceptionSlayer,
このポストと同じ stackoverflow.com/questions/25612452/…
追加された 著者 Patrick W. McMahon,
setInterval()window.requestAnimationFrame()に置き換えて使用しないでください。
追加された 著者 Patrick W. McMahon,

3 答え

なぜJavaScriptループがブラウザをフリーズさせるのですか(C ++では起こりません)

JavaScriptはシングルスレッドです。 DOMの状態は、JavaScriptコードが実行されている間、または競合状態が発生している間は変更できません。これは、描画/リフローを行わないことを意味します。

描画が遅いのはなぜですか?それは1msごとに1回の描画で実行されていても、最も簡単なことです。

1msで動作していないので、10msで動作しています。ブラウザでは、それをきちんとループすることができないからです。

解決策は何ですか?フラッシュが死んでいる、今何をするの?

requestAnimationFrameを使用し、60 FPSでゲームを実行してください。なぜもっと必要なのでしょうか?

Example using (webkit) requestAnimationFrame which runs smoothly for me.

10
追加された
(Webkit/mozilla)RequestAnimationFrameはリフレッシュレートと真に同期しません。リフレッシュレートベースのタイムインターバルコールバックです。この計算によって、フレームレートの2倍でレンダリングすると、レンダリングの滑らかさが向上することがわかりました。完全に時間を計られていないと、レンダリングの滑らかさは改善されませんでした。問題は、ブラウザで見つけたJavaScriptが、ブラウザで本当にやりたいと思っていた高性能のマルチスレッドタスクを行うようには設計されていないことです。これはJavaScriptの欠点ではなく、ブラウザ内のシングルスレッドイベントシンクとしてのJavaScriptの使用に過ぎません。
追加された 著者 Matt Esch,
"JavaScriptはシングルスレッドです。"真でないjavascriptはマルチスレッドです developer.mozilla.org/ja -US/docs/Web/Guide/Performance /&hellip;
追加された 著者 Patrick W. McMahon,

1ミリ秒は非常に短い間隔です。
コードがUIスレッドでほぼ連続して実行されるような短い間隔で、ブラウザは応答しなくなります。

ユーザーがページとやりとりする時間を与えるには、一時停止しておく必要があります。

少なくとも10ミリ秒、好ましくは100ミリ秒の間隔を使用する。

2
追加された
それはまったくそうではありません。 setIntervalは、ブラウザを応答しないようにしません。
追加された 著者 Raynos,
この正確な問題を避けるために、ブラウザには最小限のタイムアウトが設定されています。この最小値は10です。これも問題ではありません。そしてブラウザは10ミリ秒で多くのリフローレンダリングを行うことができます
追加された 著者 Raynos,
@SLaks ウェブキットは10msです。他のブラウザのソースコードを掘り下げて最小限の制限を見つけたり、簡単なテストをしてください。
追加された 著者 Raynos,
@Raynos:インターバル内のコードは実行されますが、ブラウザは応答しません。 コードが実行されていない時間がない場合、ブラウザは応答しません。
追加された 著者 SLaks,
@レイノス:その限界は標準ですか?それはどこに指定されていますか?私はそれを知らなかった。
追加された 著者 SLaks,
追加された 著者 user1043696,
追加された 著者 user1043696,

フレームレートが低下し、最終的にブラウザがフリーズする理由は、キャンバス要素によって占有されているメモリのためです。私はすでにこの質問に答えました。スレッドこちらをご覧ください。

キャンバスに何かを描画するたびに、その操作はキャンバスのパスに保存されます。このパスは、キャンバスに何かを描画するたびに多くのメモリを占有します。キャンバスのパスを空にしないと、フレームレートが低下します。例えば、javascriptとjavascriptとの間の実行時間差を見て、キャンバスパスをクリアします。

var c = document.getElementById( 'c' );
ctx = c.getContext( '2d' );
var x = 100;
ctx.fillStyle= '#f00';

function loop()
{
    ctx.beginPath(); 
    ctx.fillRect( x, 100, 20, 20 );

    ++x;
}
setInterval( loop, 1 );
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript