2

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

質問:

  • JavaScript ループがブラウザをフリーズさせる理由
  • 1 ミリ秒ごとに 1 描画で実行され、最も単純なものを描画しているのに、描画が遅いのはなぜですか!
  • 解決策は何ですか？フラッシュは死にかけている、私たちは今何をすべきか?

自分で試すキャンバスコードは次のとおりです。

<!doctype html>
<html>
<head>
</head>
<body>
    <canvas id="c" width="400" height="400"></canvas>
    <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>
4

3 に答える 3

10

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

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

1 ミリ秒ごとに 1 描画で実行され、最も単純なものを描画しているのに、描画が遅いのはなぜですか!

1 ミリ秒で実行されているのではなく、10 ミリ秒で実行されているのは、ブラウザが厳密にループすることを許可していないためです。

解決策は何ですか？フラッシュは死にかけている、私たちは今何をすべきか?

requestAnimationFrame を使用してゲームを 60 FPS で実行します。なぜそれ以上の速度が必要なのでしょうか?

私にとってスムーズに動作する（webkit）requestAnimationFrameを使用した例。

于 2011-11-13T00:19:00.603 に答える
2

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

ユーザーがページを操作する時間を与えるために、一時停止を残す必要があります。

少なくとも 10 ミリ秒、できれば 100 ミリ秒の間隔を使用してください。

于 2011-11-13T00:18:26.650 に答える
0

フレームレートが低下し、最終的にブラウザがフリーズする理由は、canvas 要素が占有するメモリが原因です。私はすでにこの質問に答えました。ここでスレッドを見つけることができます。

キャンバスに何かを描画するたびに、その操作がキャンバスのパスに保存されます。このパスは、キャンバスに何かを描画するたびにより多くのメモリを占有します。キャンバスのパスを空にしないと、フレームレートが低下します。たとえば、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 );
于 2014-05-25T18:53:39.350 に答える