CSSアニメーションがGPUで処理されているか確認する方法

CSSアニメーションによるGPU処理

昔はWebサイトでアニメーションを行う際はJavaScriptがよく使用されたが、現在はCSSアニメーションが使用されることが多い。

理由はJavaScriptは主にCPUで処理するが、CSSはGPUを併用して処理するため処理負荷が軽く、スマートフォンなどの低スペックな端末でもスムーズにアニメーションを行うことができるからだ。

ただし、CSSを使用してアニメーションを行っていても、正しく使用しないとGPUで効率的に処理することができない。

Chromeの場合はまずChrome Developer Toolを開いて3点ボタンをクリックしてRenderingを選択する。

RenderingタブでPaint flashing、Layer borders、FPS meterにチェックを入れるとアニメーション部分に枠線が付き、fpsやGPU Memoryの使用率が表示される。

適切にアニメーションがtransformで処理されていればPaint flashingによって連続して背景色が緑になることはない。

逆にアニメーションにleftプロパティなどを使用するとPaintが連続して発生するためアニメーション部分の背景色が緑になってしまう。

left使用の方はアニメーションがスムーズに動作しないのでtransformを使用した方が良い。

あとLayersタブというのもあるのでアニメーションする要素が別レイヤーになっているか確認すると良い。

SafariでもGPU処理されている範囲を調べることができるのだがGPU処理は緑、Paintは赤でChromeとは色が逆なので注意が必要。

やり方は開発メニューから要素タブを開いて四角が4つあるアイコンの「合成の境界線を表示」と筆アイコンの「ペイントフラッシュを有効にする」をオンにするだけだ。