iPhoneのベンチマーク:javascriptの実行は遅いがcanvasがなかなか
2007.11.04
昨日発表した、iPhone用アニメーション・スクリプトianime.js、遅いという評判のiPhoneのJavascriptを使って、いったいどのくらいの数のオブジェクトを同時に動かすことができるかを測定するページを作ってみた。
回転なし:http://satoshi.blogs.com/ianime/test16.html
回転あり:http://satoshi.blogs.com/ianime/test17.html
50個のアイコンを表示し、クリックしたアイコンから下のアイコンすべてを同時に1秒間アニメーションさせ、最後に何フレーム描画することができたか(fps)を表示する仕組みだ。setInterval()には33msecを与えているので、最大で30-31フレームは表示できるはず(実際パソコンで実行すると50個全部動かしても余裕で31フレームになる)。Javascriptの実行がそれに追いつかなければ(つまり、1フレームあたりの処理が33ms以内に終わらなければ)、「フレーム落ち」を起こし、数値が30未満になる。
iPhoneで測定した結果は以下の通り(回転あり、回転なし、の順)。
50個:11 fps, 8fps
40個:12 fps, 9fps
30個:14 fps, 11fps
20個:16 fps, 13fps
10個:19 fps, 16fps
用途にもよるが、20〜30個ぐらいのオブジェクトをぐりぐりと動かすのはなんら問題がなさそうである。「ギャラクシアン」ぐらいのアニメーションなら十分に可能なスピードだ。
興味深いのは、アイコンの回転という複雑なことをさせても、あまりスピードに影響がないこと。やはり、「javascriptの実行そのものはあまり早くないが、描画そのものはGPUのおかげでかなり高速化されている」という話は本当らしい。これがCPUの問題なのか単にjavascriptの実装が悪いのかは不明だが、少なくともcanvasの実装だけはなかなかなので、canvasに頼った形でアプリケーションを作ることがiPhone用のインタラクティブなアプリを作るこつではあるようだ。
下に貼付けたのは、回転がある方のテスト・ページ。Safari、Firefox では動作確認済み(IEは未サポート、Operaでも動くとの報告を受けている)。適当なアイコンをクリックすると、アニメーションが始まる。
Comments