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

アニメーションは適切に動作する必要があります。適切に動作しないと、ユーザー エクスペリエンスに悪影響を及ぼします。

Sam Thorogood

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

  • アニメーションがパフォーマンスの問題を引き起こさないように注意してください。CSS プロパティをアニメーション化した場合の影響を把握しましょう。
  • ページ（レイアウト）のジオメトリを変更したり、描画を引き起こすプロパティのアニメーション化は、特にコストがかかります。
  • 可能であれば、変換と不透明度の変更のみを行いましょう。
  • will-change を使用して、アニメーション化する対象をブラウザが認識できるようにします。

プロパティのアニメーション化は無料ではなく、一部のプロパティは他のプロパティよりも安価にアニメーション化できます。たとえば、要素の width と height をアニメーション化すると、そのジオメトリが変更され、ページ上の他の要素の移動やサイズの変更が発生する可能性があります。このプロセスはレイアウト（Firefox などの Gecko ベースのブラウザではリフロー）と呼ばれ、ページに多くの要素がある場合は高コストになることがあります。レイアウトがトリガーされるたびに、ページまたはその一部をペイントする必要があり、通常はレイアウト オペレーション自体よりもさらにコストがかかります。

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

詳しくは、高パフォーマンスのアニメーションの作成ガイドをご覧ください。

will-change プロパティの使用

対応ブラウザ

  • Chrome: 36。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 36。 <ph type="x-smartling-placeholder">
  • Safari: 9.1。 <ph type="x-smartling-placeholder">

ソース

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 の実行に関連する作業が減り、この問題が浮き彫りになります。