HTML5のアニメーション実装に役立つ様々なJavaScriptライブラリがあります。前回の記事「ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。

JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます。また、パフォーマンスがよければCPUへの負荷が低くなるため、サイト訪問者のスマホの消費電力にも優しい というもの。今まで見落としがちだったかもしれませんが、JSライブラリのパフォーマンスにも気を配りたいものです。

今回検証したJSライブラリ7種類

アニメーション（トゥイーン）用のJSライブラリとして次の7種類で比較しました。バージョンは2017年2月現在の最新版を利用。ウェブページ用途の①DOM版と、ハイパフォーマンス用途の②WebGL版の2通りの方法で検証しています。

①DOMでの同時実行性能の比較

検証用デモはGitHubに公開しており、次のリンクから試せます。ページの上部でライブラリを切り替え、画面下部の入力フォームで画面に表示するドット（div要素）の数を変更します。ドット（div要素）の数が増えれば負荷が高まります。

検証の結果は次のグラフとなりました。グラフの数値が高いほど同時実行性能（多数のオブジェクトを同時に動かしたときのパフォーマンス）が良いことを示します。3,000個のdiv要素を同時に動かしたときの実行フレームレートの値をスコアとしました。

TweenMaxが最も性能がよく、Web Animations API、Tween.jsが続きました。jQueryは最もスコアが低く、最も性能のよかったTweenMaxのわずか5分の1しかフレームレートがでていません。

※TweenMaxの公式サイトでも性能比較の検証ページがあります。本記事と比べてみるといいでしょう。

次のページでは、WebGLにおける同時実行性能を紹介します。