requestAnimationFrameのFPSを表示する

JavaScriptのrequestAnimationFrameメソッドは60fps、つまり1秒間に60回の処理を行うメソッドです。
今回のスクリプトはrequestAnimationFrameメソッドが実際に1秒間に何度処理が行うか求めて、FPSを計測するスクリプトになります。





このスクリプトでは時間をDateオブジェクトで取得しています。
Dateオブジェクトは協定世界時(UTC)の1970年1月1日からの経過した時間をミリ秒数の単位で持っています。
このオブジェクトは引数を指定しない場合は現時点の時間をミリ秒の形で持ちます。
書式は次のようになります

new Date()

さらにgetTimeメソッドを用いてDateオブジェクトの時間を取得します。
書式は次のようになります

new Date().getTime()



このスクリプトの処理はまず変数startTimeがDateオブジェクトから時間を取得します、そしてrequestAnimationFrameを持つ関数animationLoopを処理します。
animationLoopは処理する度にframeCountが1つずつ追加されて変数endTimeが時間を取得します。そしてif文を用いてstartTimeとendTimeの差を比較します。startTimeとendTimeの差が1000ms、つまり1秒になったときのframeCountがFPSになりその値をを表示します。
その後frameCountを0に戻して、改めてstartTimeが時間を取得して次のFPSを計測します。

このスクリプトはおよそ60fpsを表示しますが、表示されているページやタブを切り替える等すると60よりも低い値を表示します。これはrequestAnimationFrameメソッドがブラウザの処理を効率化するため、表示されない部分の処理を軽減するからです。