アニメーションとパフォーマンス

アニメーションの動きがスムーズでないと、ユーザー エクスペリエンスは悪化します。

Paul Lewis

Sam Thorogood

アニメーションを使用する際は、必ず 60 fps を維持してください。アニメーションがスムーズに動かなかったり途中で止まったりすると、ユーザーの目に留まりやすく、ネガティブな印象を与えます。

• アニメーションによってパフォーマンス上の問題が生じないように注意してください。特定の CSS プロパティのアニメーション化による影響を把握しておく必要があります。
• ページ（レイアウト）の形状変更や描画処理を伴うプロパティのアニメーション化は、リソースを多く消費します。
• 可能な限り、形状と不透明度を変更するようにしてください。
• will-change を使用して、ブラウザにアニメーション化する対象を通知します。

アニメーション プロパティはリソースを消費し、その程度はプロパティによって異なります。たとえば、要素の width と height をアニメーション化すると、要素の形状を変化させることになるため、ページ上の他の要素の移動やサイズ変更が必要になる場合があります。このプロセスはレイアウト（Firefox などの Gecko ベースのブラウザではリフロー）と呼ばれ、ページに多くの要素がある場合は高コストになることがあります。レイアウトがトリガーされるたびに、通常はページまたはその一部をペイントする必要があります。この処理は一般的に、レイアウト操作そのものよりもリソースを消費します。

可能な限りレイアウトやペイントをトリガーするプロパティのアニメーション化は避けてください。つまり、大半の最新のブラウザでは、アニメーションは opacity または transform に限定してください。どちらのプロパティもブラウザによって高度に最適化されており、アニメーションを処理するのが JavaScript か CSS かは関係ありません。

高パフォーマンスのアニメーションを作成する方法に関するガイドをご確認ください。

will-change プロパティの使用

will-change を使用すると、要素のプロパティを変更する予定があることをブラウザに通知できます。これによりブラウザは、実際に変更を行う前に、適切な最適化を行うことができます。ただし、will-change は使いすぎないように注意してください。多用するとブラウザがリソースを浪費し、パフォーマンスの低下を招くおそれがあります。

一般的な目安としては、ユーザー操作またはアプリケーションの状態変化によってアニメーションが 200 ミリ秒以内で開始される場合は、will-change を使用すべきだと考えられています。ほとんどの場合、変更するプロパティの種類によらず、アプリの現在のビュー内にある要素でアニメーション化する予定ものはすべて will-change を有効化します。前のガイドで使用したボックス サンプルにおいて、形状と不透明度の変更のために will-change を追加すると次のようになります。

.box {
  will-change: transform, opacity;
}

現在、ほとんどの最新ブラウザがこれをサポートしていますが、これらのプロパティを変更したりアニメーションをサポートするために、適切な最適化が行われます。

CSS と JavaScript のパフォーマンス比較

パフォーマンスの観点から、CSS と JavaScript のアニメーションの相対的なメリットについて議論しているページやコメントがウェブ上に多数存在します。留意すべき点がいくつかあります。

• CSS ベースのアニメーション、およびネイティブでサポートされているウェブ アニメーションは、一般的に「コンポジタ スレッド」と呼ばれるスレッドで処理されます。これは、スタイリング、レイアウト、描画処理、JavaScript が実行されるブラウザの「メイン スレッド」とは異なります。つまり、ブラウザがメインスレッドでコストの高いタスクを実行している場合、これらのアニメーションは中断されることなく続行できます。

• 多くの場合、形状と不透明度に対するその他の変更も、コンポジタ スレッドで処理できます。

• アニメーションでペイント、レイアウト、またはその両方をトリガーする場合は、「メインスレッド」で処理を行う必要があります。これは、CSS ベースと JavaScript ベースの両方のアニメーションに当てはまります。その結果、レイアウトやペイントのオーバーヘッドにより、CSS や JavaScript の実行に関連するあらゆる作業が妨げられるという問題が発生する場合があります。