requestAnimationFrameの制御における引数とDateオブジェクトの比較

JavaScriptのrequestAnimationFrameを用いた動作は時間を参照して制御することができます。
前回はrequestAnimationFrameの引数を参照して制御するスクリプトを紹介しましたが、他にもDateオブジェクトから時間を参照して動作を制御することができます。




このスクリプトは通常の60fpsのrequestAnimationFrameの描写（draw1）と、引数とDateオブジェクトからの時間を参照して30fpsと設定したrequestAnimationFrameの描写（draw2が引数、draw3がDateオブジェクトを参照）を比較したものです。

draw2は前回を参照してください。
draw3はdraw2と同じようにbaseTimeとnowTimeを取得してその差であるcountTimeから描写するかどうかを決定していますが、baseTimeとnowTimeはDateオブジェクトから取得しています。
Dateオブジェクトについてはこちらを参考にしてみてください。

draw2とdraw3を比較すると同じように30fpsで一回の描写で2pxで動く描写になるはずです。しかしスクリプトを動かしてみればdraw2の方が早く描写されます。（環境によってdraw3の描写が早くなる場合もあるようです）
これはDateオブジェクトを参照するよりも引数を参照したほうがブラウザの動作のリソースが効率よく利用できるためと思われます。（draw3の方が早く描写される場合はDateオブジェクトを参照したほうが効率がいい環境だといえるでしょう）
Dateオブジェクトは日時を表すオブジェクトです。その時点での時刻などを表すにはDateオブジェクトを、ある時からの経過時間を参照するには引数を用いる等使い分けをするといいでしょう。