スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか? 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA(シングルページアプリケーション)など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧様々な端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。

描画性能の検証ビデオをご覧ください

様々な端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。

様々な端末のスコアを測定しました

次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。canvasだけではなくCSS3のtransformプロパティを使った手法についても同様の見栄えのデモを作成しテストしています。HTML5でどの方法が最もパフォーマンスがいいか把握するためです。

▼HTML5描画パフォーマンス検証 (数値が高いほど高速)

HTML5描画パフォーマンス検証

※1 : translate3dで最初の数匹が点滅
※2 : translate3dでrotate,scaleが適用されていない
※3 : transform(3D)が点滅し採点不可

検証方法について

計測方法は、位置・スケール・回転をオブジェクト毎にランダムに設定し、毎フレーム移動が発生するもので時間経過とともにオブジェクト数を増やしています。直前3回のフレームレートの平均が24fpsを下回った段階での、表示されているオブジェクトの個数をスコアにしています。検証はこちらのリンクから確認できます。

▼BunnyMark方式でスコアを計測

BunnyMark方式でスコアを計測

描画テストの考察

iOS 4ではcanvas要素の性能は低かったのですが(参考「CanvasタグとJavaScriptで3Dのデモを作ってみました」)、iOS 6ではcanvasタグの性能が高い結果となりました。

Androidの各種ブラウザはiOSに比べ描画パフォーマンスが劣っている点で印象的でした。ブラウザの描画部分の最適化が遅れているのかもしれません。下記に気づいた点を箇条書きでまとめています。

  • Appleのデバイスは特にcanvasタグの描画パフォーマンスの性能が優れている
  • ただしiPad1(iOS 4)の頃のcanvasタグの性能は優れない
  • Androidにおいて、標準ブラウザはChromeより描画パフォーマンスが優れている
  • transform(3D)はAndroid 2.x系の標準ブラウザや、最新版のFirefoxで不具合があるので注意が必要
  • AndroidのFirefoxはパフォーマンスが標準ブラウザやChromeに比べ劣る

iPhone 5s以降の描画性能について (2016年10月追記)

2016年10月現在で最新のiPhone 7までの端末で同一の検証を実施しました。canvas要素の描画性能はiPhoneの世代ごとの性能を顕著に示しています。iPhone 3GSでは152だったスコアが、iPhone 7 Plusでは5373です。最新世代のiPhone 7 PlusはiPhone 3GS(2009年)に比べて35倍の、iPhone 5(2012年)に比べて2.6倍のスコアが得られることがわかりました

機種名OScanvastransform(2D)transform(3D)
iPhone 5siOS 10.01920460457
iPhone 6 PlusiOS 10.02920709572
iPhone 6s PlusiOS 10.041941464970
iPhone 7 PlusiOS 10.053731411875

HTML5 CanvasのiPhone各世代別のスコアをグラフにプロットしました。グラフのスコアが高いほど、性能が高いことを示します。

HTML5 CanvasのiPhone各世代の性能グラフ

次のページでは、JavaScriptの計算速度について検証します。