泰延WebGLContext2DTweenMaxCreateJS13812565HTML5のアニメーション実装に役立つさまざまなJavaScriptライブラリがあります。流行りのJSライブラリのまとめ」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます。今まで見落としがちだったかもしれませんが、JSライブラリのパフォーマンスにも気を配りたいものです。今回検証したJSライブラリ7種類アニメーション(トゥイーン)用のJSライブラリやテクノロジーとして次の8種類で比較しました。バージョンは2017年2月現在の最新版を利用。ウェブページ用途の1DOM版と、ハイパフォーマンス用途の2WebGL版の2通りの方法で検証しています。検証用デモはGitHubに公開しており、次のリンクから試せます。ページの上部でライブラリを切り替え、画面下部の入力フォームで画面に表示するドット(div要素)の数を変更します。ドット(div要素)の数が増えれば負荷が高まります。DOMデモを別ウインドウで再生するソースコードを確認する検証の結果は次のグラフとなりました。グラフの数値が高いほど同時実行性能(多数のオブジェクトを同時に動かしたときのパフォーマンス)が良いことを示します。3,000個のdiv要素を同時に動かしたときの実行フレームレートの値をスコアとしました。Animation、Tween.jsが続きました。jQueryはもっともスコアが低く、もっとも性能のよかったTweenMaxのわずか5分の1しかフレームレートがでていません。※TweenMaxの公式サイトでも性能比較の検証ページがあります。本記事と比べてみるといいでしょう。続いて、WebGLで検証してみます。WebGLはGPUを活用するため描画負荷が極めて低く、DOMよりもはるかに多くのオブジェクトを表示できます。描画負荷が少なくなるため、アニメーションライブラリの計算負荷がDOM版の検証もよりも顕著にあらわれるはずです。WebGLデモを別ウインドウで再生するソースコードを確認するWebGLでは次の結果となりました。この検証では、40,000ドットを同時に動かしたときの、実行フレームレートの値をスコアとしてます。TweenMaxがもっとも性能がよく、次にTweenJSとTween.jsが続きました。Anime.jsはWebGL用途では性能的に厳しいことがわかりました。FlashはWebGLの類似技術を使っているため、参考値として掲載してますまとめ:パフォーマンスはTweenMaxが最強だが今回は性能比較を中心として紹介しました。パフォーマンスだけでみればTweenMaxが有力な選択肢ですが、前回の記事で紹介したようにライセンスが独自であるため用途が限られるかもしれません。ゲームを作るのか、プログラミングアートを作るのか、ウェブサイトのマイクロインタラクションを作るのか、・・・用途によって適したアニメーションライブラリは異なりますので、長所短所を見極めて利用するのがいいでしょう。MEDIAでは、今までもHTML5関連の検証データとして「描画系JSライブラリの性能比較」や「スマホブラウザでのWebGL描画性能の検証」を公開していました。MEDIAを引き続きチェックくださいませ。