OtsuBlogProfileTwitterGithubCSSアニメーションにおけるGPUをまとめてみた2018-10-05最近、CSSアニメーションにおけるGPUについて調べる事があったので、まとめてみた。GPUとCPUCSSアニメーションのパフォーマンスを改善する際に、GPU,CPUで処理する考え方が必要になってくる。コンピュータの制御や演算や情報転送をつかさどる中枢部分なぜGPUがパフォーマンス改善に役立つのか通常はCPUのみでアニメーションの演算や描画までを行っている。描画性能が高いGPUに描画処理を任せる事で、描画パフォーマンスが改善が期待出来る。ブラウザにおけるハードウェアアクセラレーション通常ブラウザは、表示するページを1枚の絵として描画する。ハードウェアアクセラレーションが適用された要素は、一枚の絵の上に別レイヤーを作る。処理を切り離してGPUで処理させることで、処理を最適化させる事ができるという仕組み。ハードウェアアクセラレーションが適用されているイメージを作っている方がいらっしゃった。ハードウェアアクセラレーションを適用させるには下記のプロパティを使ったCSSアニメーションはGPU処理となる。見る事で実際にGPU処理されているか確認出来る。具体的に下記の確認できる。再描画されている要素GPUレイヤーで生成されている要素FPSなどの計測topやleftなどのプロパティをGPU処理させるにはtopやleftなどもGPUレイヤーで処理させる事が出来る。下記のプロパティのいずれかを一緒に当てると、GPUレイヤーが生成されGPU処理となる。0);ただやはり移動させる系のプロパティは、translateやtranslate3dを使った方がパフォーマンスには良いとのこと。GPU処理もやりすぎると逆にパフォーマンスは落ちてしまう..とても良さそうに見えるGPU処理。GPU処理もレイヤーを生成させて管理するコストがかかっている。やりすぎると逆にCPUへの負荷が高まりパフォーマンス低下を招いてしまうもよう。指定も、多用しすぎると上記の現象が起きてしまうので、注意が必要そう。具体的には、下記の点に気をつけると良さそうだった。etc..主にフロントエンドを中心に発信しています。