近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA(シングルページアプリケーション)など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。描画性能の検証ビデオをご覧くださいさまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。さまざまな端末のスコアを測定しました次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。canvasだけではなくCSS3のtransformプロパティを使った手法についても同様の見栄えのデモを作成しテストしています。HTML5でどの方法がもっともパフォーマンスがいいか把握するためです。検証方法について計測方法は、位置・スケール・回転をオブジェクト毎にランダムに設定し、毎フレーム移動が発生するもので時間経過とともにオブジェクト数を増やしています。直前3回のフレームレートの平均が24fpsを下回った段階での、表示されているオブジェクトの個数をスコアにしています。検証はこちらのリンクから確認できます。6ではcanvasタグの性能が高い結果となりました。Androidの各種ブラウザはiOSに比べ描画パフォーマンスが劣っている点で印象的でした。ブラウザの描画部分の最適化が遅れているのかもしれません。下記に気づいた点を箇条書きでまとめています。7までの端末で同一の検証を実施しました。canvas要素の描画性能はiPhoneの世代ごとの性能を顕著に示しています。5(2012年)に比べて4.7倍のスコアが得られることがわかりました。CanvasのiPhone各世代別のスコアをグラフにプロットしました。グラフのスコアが高いほど、性能が高いことを示します。JavaScriptの計算テストJavaScriptの数値演算でどのくらいのパフォーマンスがでるのか測定しました。スコアが小さいほど良好な結果であることを示します。Revisitedと同じ手法で、Box2Dのstep計算における平均時間(ミリ秒)をスコアとしました。スコアが小さいほど良好な結果です。検証はから確認できます。MEDIA計算テストの考察JavaScriptの計算に関してはデバイスに搭載されているCPUの性能が顕著にあらわれています。S3αのFirefoxです。端末ごとのスペックの差が大きい点に実装時は注意が必要となりそうです。7までの端末で同一の検証を実施しました。JavaScriptの計算でもiPhoneの世代ごとの性能差が顕著です。X(2017年)では11ミリ秒しかかかっていません。9JavaScriptのiPhone各世代別のスコアをグラフにプロットしました。グラフのスコアが低いほど、性能が高いことを示します。Playerで実現していたようなリッチな表現がiPhoneやiPadデバイス上で展開できると思います。Appleがアプリ市場のためにブラウザでのリッチコンテンツ(ゲーム等)を牽制しているとよく言われます。Appleのデバイスがもっともブラウザの描画パフォーマンスが良く、この矛盾している事実は興味深いのではないでしょうか。当サイトでは他にもさまざまな視点からHTML5などの技術のパフォーマンスを検証しています。次の検証記事も合わせて把握することで、開発時に役立てることができるはずです。あわせて参照くださいませ。平成30年11月8日に内容をメンテナンスしています。