CSSアニメーションにおけるGPUをまとめてみた

最近、CSS アニメーションにおける GPU について調べる事があったので、まとめてみた。

GPU と CPU

CSS アニメーションのパフォーマンスを改善する際に、GPU,CPU で処理する考え方が必要になってくる。

GPU とは

GPU(Graphics Processing Unit) ・・・ 画像処理を担当する部品の１つ

CPU とは

CPU(Central Processing Unit) ・・・ コンピュータの制御や演算や情報転送をつかさどる中枢部分

なぜ GPU がパフォーマンス改善に役立つのか

通常は CPU のみでアニメーションの演算や描画までを行っている。 ただ描画性能が高い GPU に描画処理を任せる事で、描画パフォーマンスが改善が期待出来る。 この GPU に描画処理を任せる行為を、 ハードウェアアクセラレーション と呼んでいる。

ブラウザにおけるハードウェアアクセラレーション

通常ブラウザは、表示するページを 1 枚の絵として描画する。 ハードウェアアクセラレーションが適用された要素は、一枚の絵の上に別レイヤーを作る。 処理を切り離して GPU で処理させることで、処理を最適化させる事ができるという仕組み。

ハードウェアアクセラレーションが適用されているイメージを作っている方がいらっしゃった。

ハードウェアアクセラレーションを適用させるには

下記のプロパティを使った CSS アニメーションは GPU 処理となる。

  • opacity
  • translate
  • rotate
  • scale
  • 3D 系プロパティ(translate3D, scale3d, rotate3d など)

GPU 処理されているか確認する

Chrome DevTools の Rendering を見る事で実際に GPU 処理されているか確認出来る。

具体的に下記の確認できる。

  • 再描画されている要素
  • GPU レイヤーで生成されている要素
  • FPS などの計測

top や left などのプロパティを GPU 処理させるには

top や left なども GPU レイヤーで処理させる事が出来る。 下記のプロパティのいずれかを一緒に当てると、GPUレイヤーが生成されGPU処理となる。

  • backface-visibility: hidden;
  • transform: translateZ(0);
  • transform: translate3d(0, 0, 0);

ただやはり移動させる系のプロパティは、translate や translate3d を使った方がパフォーマンスには良いとのこと。

GPU 適用の Example

注意点: GPU 処理もやりすぎると逆にパフォーマンスは落ちてしまう..

とても良さそうに見える GPU 処理。 だけど GPU 処理もレイヤーを生成させて管理するコストがかかっている。 やりすぎると逆に CPU への負荷が高まりパフォーマンス低下を招いてしまうもよう。

GPU処理によるデメリット

  • アニメーションのチラツキ
  • 動作が重くなる
  • 描画崩壊
  • ゴミがつく

※ハック的に GPU レイヤーを生成する transform: translate3d(0, 0, 0); などの指定も、多用しすぎると上記の現象が起きてしまうので、注意が必要そう。

具体的には、下記の点に気をつけると良さそうだった。

  • GPU 処理させている要素がたくさんありそうな時に注意する
  • GPU 処理させる要素に子要素が必要な場合は出来る限り少なくする
  • 使用してない要素は、display:none;か GPU 処理を切るようにする
  • body タグなど包括しているタグに、transform: translateZ(0);は指定しない
  • GPU 処理も CPU へのコストがかかっている事を意識しておく
  • モバイルは特にブラウザの性能が低い事を知っておく

GPU を考慮して、快適な CSS アニメーションライフを送っていきたいですね..!