CSSアニメーションによるGPU処理
昔はWebサイトでアニメーションを行う際はJavaScriptがよく使用されたが、現在はCSSアニメーションが使用されることが多い。
理由はJavaScriptは主にCPUで処理するが、CSSはGPUを併用して処理するため処理負荷が軽く、スマートフォンなどの低スペックな端末でもスムーズにアニメーションを行うことができるからだ。
ただし、CSSを使用してアニメーションを行っていても、正しく使用しないとGPUで効率的に処理することができない。
GPU処理の確認方法
Chromeの場合はまずChrome Developer Toolを開いて3点ボタンをクリックしてRenderingを選択する。
RenderingタブでPaint flashing、Layer borders、FPS meterにチェックを入れるとアニメーション部分に枠線が付き、fpsやGPU Memoryの使用率が表示される。
適切にアニメーションがtransformで処理されていればPaint flashingによって連続して背景色が緑になることはない。
CSSアニメーションGPU処理サンプル(transform)
逆にアニメーションにleftプロパティなどを使用するとPaintが連続して発生するためアニメーション部分の背景色が緑になってしまう。
left使用の方はアニメーションがスムーズに動作しないのでtransformを使用した方が良い。
あとLayersタブというのもあるのでアニメーションする要素が別レイヤーになっているか確認すると良い。
SafariだとGPU処理されている範囲は緑
SafariでもGPU処理されている範囲を調べることができるのだがGPU処理は緑、Paintは赤でChromeとは色が逆なので注意が必要。
やり方は開発メニューから要素タブを開いて四角が4つあるアイコンの「合成の境界線を表示」と筆アイコンの「ペイントフラッシュを有効にする」をオンにするだけだ。