JavaScriptのフレームレートについて考える

スマートフォンを使っていると、非常に動きが鈍いページが存在する。 面白そうな記事のページを開いた時に、

1.ページの表示が遅い。 2.スクロールをするが、遅れて描画される。 3.クリックしても切り替わりが遅い。

という風に、遅いという事にイラつくページを多々見かけることもあります。 ちなみに、使用している端末はiPhoneなのですが、Androidで一部の機種（または古い機種）では、 CPUが古いスペックだったり、メモリが少なかったり、OS、のバージョンが古いなどの理由で 劇的に遅いというモノもあるようです。

遅いという原因

2015年にSSLの企画がSHA1（シャーワン）からSHA256（シャーツー）にバージョンアップされ 2016年から2017年にかけて、認証局の方でもSHA1を切り捨てていく事が決まっているようです。 そしてHTTPバージョンも現在の1.1から2.0にアップデートされると、 WEBページの表示速度はかなり改善されることになるようです。 これは、HTTP1.1の仕様でセッションの扱いがChromeブラウザでは6個までという制限になっている 事に対し、HTTP2.0移行では、単一セッション毎に非同期で扱われるようになる為に、

重い画像があるせいで、ページのそれより下が表示待ちが発生したり とても回線品質の悪い広告バナーが設置されているせいで、ページ読み込みが完了しなかったり

というような事がなくなるという事なんですね。 難しいことは置いておいてとにかく早くなるという事です。

javascriptによる遅延

今や、企業のWEBページには、マーケティングツールが山ほど導入されており、ツールの種類によっては リアルタイムにJavaScriptで処理を行なっているものも少なくないようです。 この時に、フレームレートという概念をしらないプログラマーが構築してしまうと、 非常に重たいプログラムになる事もあります。 ライブラリで広まっているjQueryでは、プログラマーが意識すること無くアニメーション処理が随時に入ってきますが、 JavaScriptで行なっているアニメーション処理は、ミリ秒での繰り返し処理にて描画や処理を行なっている為、 どういった頻度で繰り返し処理が行われているか、理解されていないと非常に無駄な処理にCPUやらメモリやら描画エンジンを食いつぶされることは、残念ながら結構発生しているようです。

フレームレート概念

コンシューマゲーム業界で飯を食っている人であれば、ゲームハードにおけるフレームレートは認識していて当たり前なのですが、WEB開発現場では、あまり意識されている事を耳にしないので、知らずに損をしている人も少なく無いと思われます。

フレームレートは１秒間に行われる処理（描画）の回数で単位を（frame par second）

映画は1秒間に24枚のフイルムを描画（24fps） 日本のアニメは1秒間に8枚※正確には同じ3枚を8回分（8fps） 家庭用ゲーム機（最大60fps） 液晶モニタ（最大300fpsぐらい） ゲームの場合はテレビという描画装置の制限もあり、時代の流れで高品位になってきているようです。 ちなみに描画におけるフレームレートは物理的には60f/sが上限という風に言われています。

JavaScriptにおけるフレームレートの考え方

プログラムにおいては、1000ミリ秒という単位で考えられるため、1000fpsという処理が扱えるようになってしまいますが、実際はスマートフォンやPC端末、液晶モニタの表示処理スペックに依存してしまいます。 重いと言われているプログラムなどを見ていると setTimeoutやsetIntervalの秒指定に1000で1秒という値に「30」やら「1」などの値を見ることもあります。 「1」にするという事は1000f/sというCPU処理になり、スペックがさほど高くないスマホ端末などで行うと確実に処理落ちをしてしまうという値ですね。

適正値の考え方

描画フレームの最高値が60fpsだとすると、1000÷60 fpsより低い値にしても意味がないという事もなんとなく理解できるかと思います。 ただ、javascriptの処理はイコール描画という訳ではないのですが、あくまで参考値として知っておいたほうがいいと思います。 1000 / 60 = 16.667 このぐらいの値なんですね。 正直60fpsなどが必要とは思わないので30fpsや24fpsで考えると以下の値です。 1000 / 30 = 33.333 1000 / 24 = 41.667 1000 / 8 = 125

サンプル

そして、実際にこれらの動作を目で見てみよう。 30fpsと60fpsの見比べが動画で行えるので見て欲しい。 スーパースローにしてなんとなく違いが分かる程度なのがわかると思う。 ということで、おそらくではあるが、setTimeoutやsetIntervalの数値は30ぐらいで全く問題ないと言ってもいいだろう。 実際はその中でどういう処理を行うかをベンチして、処理落ちしないようにする事が大事なのだが、ライブラリに頼ってばかりの人はこの辺に手が出せなくなるかもしれないので、是非自分での回避策を検討しておこう。