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

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

アニメーション化する際は常に 60 fps を維持してください。60 fps を維持すると、スタッタリングやストールが発生してユーザーの目に留まり、エクスペリエンスに悪影響を及ぼします。

  • 任意の CSS プロパティをアニメーション化するときの影響を把握し、アニメーションによってパフォーマンスが下がらないように注意してください。
  • ページ(レイアウト)の形状変更や描画処理を伴うプロパティのアニメーション化は、リソースを多く消費します。
  • 可能な限り、形状と不透明度を変更するようにしてください。
  • will-change を使用して、アニメーション化する対象をブラウザが認識できるようにします。

アニメーション プロパティはリソースを消費し、その程度はプロパティによって異なります。たとえば、要素の widthheight をアニメーション化すると、要素の形状を変化させることになるため、ページ上の他の要素の移動やサイズ変更が必要になる場合があります。この処理はレイアウトと呼ばれ(Firefox など Gecko ベースのブラウザの場合はリフロー)、ページに多くの要素が含まれていると、リソースを多く消費する可能性があります。レイアウトがトリガーされるたびに、ページまたはその一部をペイントする必要があり、通常はレイアウト オペレーション自体よりもさらにコストがかかります。

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

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

will-change プロパティの使用

対応ブラウザ

  • Chrome: 36。
  • Edge: 79.
  • Firefox: 36.
  • Safari: 9.1。

ソース

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 の実行に関連するあらゆる作業が妨げられるという問題が発生する場合があります。