requestAnimationFrame()コールバックの奇妙な時間値[重複]

Dec 05 2020

const prev = performance.now();
requestAnimationFrame(now => console.log(now - prev));

なぜ(少なくとも最後のChromeブランチでは)now常に小さいのprevですか?

スクリーンショット:

回答

1 MichalisGarganourakis Dec 05 2020 at 06:41

これは、現在のフレームと次の再描画の間のアニメーションを要求したが、timestamp引数が確立されたときの現在のフレームの最初のコールバックトリガーを実際に見逃した可能性があるために発生します。

requestAnimationFrameこの期間中にコールバックの呼び出しが多数発生する可能性がありますが、それらはすべて、への呼び出しの前に発生した可能性のあるアクティブフレーム内のtimestamp最初requestsAnimationFrameのコールバックトリガーを持ちますperformance.now()

MDNは次のようにも述べています。

コールバック関数には、performance.now()によって返されるものと同様のDOMHighResTimeStampという1つの引数が渡され、requestAnimationFrame()コールバック関数の実行を開始する時点を示します