cssアニメーションのプロパティによるパフォーマンスの違い

2021-05-02

概要

CSSアニメーションを使用する際、パフォーマンスは避けて通れません。
高パフォーマンスのプロパティでは動きにかくつきがみられ、とても不恰好になることがあります。

今回はアニメーションのレンダリングの違いから要素移動アニメーションのパフォーマンスについて考えてみます。

CPU/GPUレンダリングの違い

描画済みの要素を変化を加え再描画させる時、CPU処理とGPU処理があります。

CPU

要素の位置が変更される際に、ペイント(ピクセルの描画)処理が行われレンダリングされます。

  • left, right, top, bottom

これらは、CPU処理になります、

GPU

レイヤーという概念を用い、そのレイヤーを移動させ合成が行われレンダリングされます。

  • transform
  • opacity
  • position

これらのプロパティはレイヤーが作成されるため、GPU処理となります。

レンダリングの工程

  1. Style(スタイルの適応)
  2. Layout(スタイルの計算および要素の配置)
  3. Paint(ピクセルの描画)
  4. Composite(レイヤーの合成 = 定着)

1(Style)と 4(Composite) は必ず行われますが、2(Layout)と3(Paint)についてはスタイルの変更方法次第では省くことが可能になります。
Layout と Paint はコストのかかる処理なため、省くことでスムーズなアニメーションが可能です。

CPU/GPU処理の移動アニメーション

実際にleft(CPU処理)とtransform(GPU処理)を使った比較をしていきます。
それぞれ、パフォーマンスよりレンダリングの工程を確認していきます。

検証ツールはGoogleChromeのDevTool-ペイントを可視化してみていきます。

leftを使用

leftを使用した移動アニメーションです。

パフォーマンス結果は以下の通りです。 cpu performance

再描画されるたびに、Layout, Paintが走っているのがわかります。

transformを使用

transformを使用した移動アニメーションです。

パフォーマンスは以下の通りです。 gpu performance

最初はPaint処理がありますが、移動時にはLayout処理が回避されており、Paint処理も減少しています。

レイヤーの生成

実はcssにはレイヤーを生成するためのプロパティが存在します。

以前は、transform: translateZ(0)を使用し、レイヤーを生成する方法がとられていました。

現在はwill-changeプロパティがあり、指定したプロパティのレイヤーを作成させておくことができます。

IEを除き、モダンブラウザで対応済です。

will-changeとは

CSS の will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。この種の最適化は、実際に変化が求められる前に、潜在的に高コストの処理を行うことで、ページの応答を向上させることができます。 https://developer.mozilla.org/ja/docs/Web/CSS/will-change

will-change:left + left

will-change:left + leftを使用した動きをみていきます。

パフォーマンスは以下の通りです。 ui cpu willchange

Paint処理はなくなりました。これはleftをwill-changeでレイヤー化しているためです。
ですが、Layout処理は依然として残っています。

will-change:transform + transform

will-change:transform + transformを使用した動きをみていきます。

パフォーマンスは以下の通りです。
gpu willchange performance

アニメーション始めのPaint処理がなくなり、Layout処理もなくなっていることがわかります。

will-changeを使う場面

  • transformだけではかくつく場合
  • 高コスト(width, paddingなど)のアニメーションがある場合
  • アニメーションを滑らかにしたい場合

注意点

ブラウザ自体がすでに最適化を図っているので、乱用するとマシンのリソースを使い切ってしまい、ページ速度低下を招く可能性があります。

また、常にwill-changeを指定するのではなく、スクリプトコードを使って will-change のオン/オフを切り替えることを習慣づけると良いです。

結論

アニメーションの世界では処理があり、その過程にパフォーマンス改善の鍵があることがわかりました。

参照

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店