CSSアニメーションのパフォーマンス監視

投稿日:

(Virendra Singh)(2020年4月22日)

JavaScriptを使用したアニメーション ?または CSSを使用したアニメーション

この質問は、技術的なキャリアの中ですべての開発者に1回、またはおそらく2回以上当てはまります。

時間の経過とともに、Javascriptオタクは、ブラウザでアニメーションを実行するための多くのライブラリを考案しました。これらのライブラリを既製のソリューションとして使用することを確信しているようです。しかし、ちょっと待ってください、これは正しい解決策ですか? JavaScriptを使用してアニメーションを作成する必要がありますか?または、ネイティブのCSS実装を使用して、アニメーションをより優れたパフォーマンスで実行できますか?

このブログを読んでいるので、JavaScriptアニメーションに精通していると思います。それでは、「CSSベースのアニメーション」の詳細とCSSアニメーションのさまざまなフレーバー、およびそれらのパフォーマンスへの影響について見ていきましょう。

アニメーションの基盤は、CSSベースのアニメーションでよく使用されるいくつかのCSSプロパティに依存しています。実装。

位置:(絶対/相対)

変換

不透明度

左、右、上、下、さらに多く。

アニメーションのCSSプロパティが異なる2つの実験の結果を見てみましょう。

(a)左右の絶対位置

(b)transform

さらに、これらの実験に基づいてパフォーマンスとレンダリング時間について結論を出してみませんか?

これら2つの例を見ると、似ているように感じます。機能性が損なわれていますさまざまなアプローチを使用しているにもかかわらず、嘆きました。ただし、chrome dev-toolでパフォーマンス指標を測定すると、両方のケースでパフォーマンスの点で実際の違いが見られます。

これらのパフォーマンス指標を深く掘り下げる前に、ブラウザがどのように機能するかを理解する必要があります。 UIと、UIで更新が発生したときに実行するすべてのアクションをレンダリングします。

したがって、UIの作成は次のように始まります。

1)要素に適用するスタイルを計算します(スタイルの再計算)

2)要素のレイアウトを作成し、画面上に配置します(レイアウト)

3)作成したすべてのレイアウトにピクセルを追加します。これは、各レイヤーのビットマップを作成することです。 GPUはこのビットマップを使用して、画面上にレイヤーをレンダリングします(ペイント)

4)最後に、画面上にレイヤーを作成し、レイヤーのスタックを構築します。このスタックの上面図は、すべての要素が独自の位置を持っている完全なWebページのようになります(複合レイヤー)

複合レイヤーの作成は、CPUがGPUと通信して処理する場所です。アニメーション。 transformやopacityなどのプロパティを使用すると、 ブラウザにGPUの代わりにGPUを使用してアニメーションを実行させることができますCPU。

では、GPUはスムーズなアニメーションの実行にどのように役立ちますか?

GPUは、アニメーションを処理するためのもう1つの小さなマシンであり、多数のUI計算を処理できます。

したがって、コンポジットレイヤーの作成がトリガーされると、別のレイヤーが作成されます。これは、アニメーション化される要素やUI要素の他の部分の再レンダリングを回避するためのもう1つの方法です。

下の図では、両方の赤いボールが同じレイヤー上にあるように見えます。ただし、このレイヤーを3D回転で移動すると、 変換 アニメーションには、赤いボール用に作成された別のレイヤーがあり、スムーズなアニメーションを提供します。

GPUは、このレンダリングオブジェクトツリーをメモリに保持し、再度レンダリングすることはありません。 、このレイヤーを他のレイヤーの上に置くことができます。ただし、左上のアニメーションの場合、これらのプロパティの変更により、同じレイヤーが何度もレンダリングされます。これら2つのCSSプロパティの動作を確認すると、両方のプロパティが left および top レイアウトに影響を与え、再描画と合成操作も引き起こします。

翻訳トップ/左

上記のボールのアニメーションには、翻訳vs上/左

上/左の場合アニメーションでは、ボールは最終目的地に到達するまで各位置でレンダリングされ、再び初期位置に移動し始めると、レンダリング部分が開始されます。

注:紫色は赤いボールのレイアウト作成を表し、緑色はピクセルのファイリングに使用されます。

上の写真は両方とも、の翻訳のパフォーマンスのスクリーンショットです。 top / left

それぞれのタスクを1つ強調することで、理解し始めます タスクによって実行されるアクティビティは、どちらの場合も異なります。 左上の場合 、タスクはレイアウトの作成、ペイント、スタイルの再計算を実行しました。 翻訳の場合 、によって実行される単一のタスクGPUは、DOMで何もレンダリングせずに複合レイヤーを移動します。

したがって、GPUの能力により、メインスレッドを解放します。これにより、アプリケーションのパフォーマンスが向上し、メインスレッドはレイアウトのレンダリングでビジー状態になります。

上記のパフォーマンスメトリックグラフは、メインスレッドがレイアウトとスタイルの再計算でビジー状態になっている正確な範囲を説明する、より多くの証拠を提供します。このグラフは、UIで発生する変更を継続的に反映しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です