アニメーションのパフォーマンス考慮
アニメーションを実装する際は、パフォーマンスの考慮が必要です。同じ表現をするにも、実装方法によってパフォーマンスへの影響が異なります。
測定可能な指標
アニメーションの実装手段を検討する上では、主に2つの指標があります。
- 通信量
- ブラウザ上で動作するときの処理負荷
1. 通信量
アニメーションを再生するためにダウンロードするファイルサイズです。
チェック方法
Chrome DevToolsのNetworkタブで確認できます。（ドキュメント）
注意点
出力するファイルサイズをできるだけ小さくしましょう。例えば、JSファイルや画像ファイルを圧縮するなど。
合計が同じファイルサイズでも、分割して並列に読み込むことでダウンロードにかかる時間を減らせる場合もあります。
最初に全部ダウンロードするのではなく、再生中に並列して読み込むことで、初期再生までの時間を減らせる場合もあります（ストリーミング再生）
ループ再生をする際、新たにデータをダウンロードするのではなく、同じファイルを利用して（キャッシュを利用して）再生できるようにしましょう。
例えば、YouTubeのループ再生を行うと、ループのたびに新しくデータをダウンロードしてしまいます。「終了時に初めにシークする」ことで通信量を減らすことができます。参考
2. 処理負荷
チェック方法
Chrome DevToolsのPerformanceタブで計測できます。（ドキュメント）
注意点
動画・画像の場合は、画質を落とす、フレームレートを落とすことで負荷を下げられることがあります。
DOMが多すぎる場合、負荷がかかります。操作するDOMを減らす、canvasに描画するように変更するなどしましょう。
例えば以下の2つは、同じパーティクルアニメーションをSVGとcanvasそれぞれの方法で実装した例です。
Performanceタブで計測してみると、SVGの実装ではRenderingに大きく時間を割かれているのに対して、canvasでは全く時間がかかっていません。
| SVG | canvas |
|---|---|
 |
 |