requestAnimationFrameでフレームと再描画更新を制御したい

Question

### 前提・実現したいこと
JavaScriptでrequestAnimationFrameでフレームと再描画更新を行うコードを書いてみました。
そこで、一秒ごとにconsole.logで変数fpsを出力したところ、変数の値が４０あたりを行ったり来たりしている状態です。
(requestAnimationFrameが60回更新しているのに対し、if(ping >= 1){}内のコードは40回しか実行されない）。
if（ping >= 2)にすることで、関数内のコードの実行を３０回に抑えようとすると、実際には20回しか実行されないことも確認しました。
（この時のrequestAnimationFrameの更新は60回です）
目標としては、if関数ないの変数「ping」の値を変えることで、自由にfpsを制御できるようにしたいのですがどのような改善が必要でしょうか？



### 発生している問題・エラーメッセージ
期待している通りの、更新制御が行えない。

### 該当のソースコード

```Javascript

//ゲーム開始時刻
var start = Date.now();

//過去の時間（最初は初めの時間を使う）
var pastTime = start;
var pastSecond = start;
var time;
console.log(start);

//fps
var fps = 0;
var ping = 0;

render = function () {
        //fps管理
        time = Date.now();
        ping = (time - pastTime ) / (1000/60);
        if (ping >= 1) {
            fps += 1;
            pastTime = time;
        }

        //一秒判定
        if ((Math.floor(time / 1000) - Math.floor(pastSecond / 1000)) >= 1) {
            console.log(fps);
            pastSecond = time;
            fps = 0;

        }
        requestAnimationFrame(render);
    }

render();
```

### 補足情報（FW/ツールのバージョンなど）
fpsの計測はfirefoxのコンソール画面での計測です。

Accepted Answer

結論から言いうならば、`Date.now()`を使うのをやめましょう。
こいつは「今」の時刻なので正確な時刻ではないですし（！？）、
なんかやってるのは確実なのでコストを増加するだけのノイズになっています。

代わりに第一引数としてコールバック関数に渡される
`DOMHighResTimeStamp`を利用するようにしてください。
[requestAnimationFrame - MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame)

第一引数として使われる時点でもう生成された後の話なので、
使っても使わなくてもコストは変わりません。

まぁ、`DOMHighResTimeStamp`はよく分からないDouble型の数値なので扱いはめっちゃ大変だと思いますが、
この中には何時に前回のレンダリングが行われたかの時刻が取得できるので、フレーム計算を行う上でより正確な記述ができるはずです。

---

質問文のようなFPSの調査をしたいのであれば、
requestAnimationFrameとsetTimeoutやsetIntervalを併用すればいいんじゃないですか？
厳密には1000ms毎ではなく、998〜1002msとかの範囲でブレるでしょうけど、
質問文のコードもどうせズレているので誤差みたいなもんでしょう。

```JavaScript
// fps以外の状態変数など不要だ！！
var fps = 0;

var render = function () {
  fps++;
  requestAnimationFrame(render);
}
render();

var showFps = function () {
  console.log(fps);
  fps = 0;
}
setInterval(showFps, 1000);
```

---

ゲームやフレームというワードが質問文にありますが、
もしかしてフレーム単位で天国か地獄かが分かれるような構造のゲームを作りたいのでしょうか？

もしそうならば、JSでやるなら場当たり的なチューニングをする前に、
まずJSのイベントループの仕様を知る必要があります。

JSはHTML上に書かれたコードを超高速で全て実行し完了します。
完了してしまうならば、どうやって「イベント」を引っ掛けて実行するのか？
それはJSがイベント駆動という考え方をしているからです。

JSの関数は「変数に代入」「関数の引数に含める」「関数の戻り値に含める」ことが可能な言語であり、他の変数と違いは、尻に`()`を付けて実行が可能くらいしかありません。
[第一級オブジェクト](https://ja.wikipedia.org/wiki/%E7%AC%AC%E4%B8%80%E7%B4%9A%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88)

JSではこの特性を利用して、やることリストのように関数を用意しておき、
「Aの条件を満たしたら、引数として渡した関数を実行してね、よろしく」という使い方をします。
これが「イベントの登録」、特定のメモリ領域に関数を保存するだけなので一旦処理は終わります。

その後、全ての処理が終わって暇になったブラウザは、定期的に巡回を行います。
「イベントを満たす条件を満たしたイベントは居ないかな？」という風な巡回です。
条件を満たしたらイベントに登録されている関数を1つずつ呼び出して実行します。
その時に投げ込まれる引数はブラウザやMDN等が定義しているので必要に応じて調べてみてください。

これが大まかな流れになります

---

次に、この仕様がゲームのようなフレームを気にするものを作る時に於いてどう影響するのかを見ていきます。

- setTimeoutやrequestAnimationFrameは条件を満たした後も、イベントループの巡回を待つ必要があり、平気で数ms発火が遅延する
- JSはシングルスレッドなので、同時に1個の処理しかできない。したがって同時に複数条件を満たした場合、どちらの関数が(制御出来ないのでほぼランダムに)先に実行され、もう片方は後回しにされる、それにより平気で数ms発火が前後する
- requestAnimationFrameは「はい描画しました、次のフレームを作る準備をしてくださいね」と言っているので、画面への反映タイミングはどう頑張っても1フレーム遅れ

これらの事から、JSでC#のようなフレーム単位のゲームを作るのは不可能クラスに難しいです。
一時的にマシンの負荷をかけて、例えば敵の弾幕が自機を飛び越えるような間隔のレンダリングにして無傷でやり過ごす裏技がありますので、描かれなかったフレームの計算を行ったり…という対処を行うと飛躍的に処理が増えて更に重くなる…という悪循環に陥るでしょう。

ゲーム自体の設計を見直したり、何処を妥協するかをよく練って下さい。
実際のゲームの実装はフレーム落ちはまぁしゃあないと諦めている事も多いです。

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

補足情報（FW/ツールのバージョンなど）

関連した質問