「レイヤーツリーの更新」をトリガーするアクションはどれですか？

Question

「レイヤーツリーを更新する」アクションをトリガーするアクションを見つけ出すのに助けになる人はいますか？そして、 '更新レイヤーツリー'はページの読み込み時間にどのような影響を与えますか？

Answer 1

がhttps://csstriggers.com/

をチェックアウトこれは私が特定のCSSプロパティを変更する場合」、ブラウザは何をすべきかの作業を余儀なくされる質問に答えるGoogleのエンジニア（PaulとSurma）のカップルが作成したツールですか？ "ブラウザの作業は3つの主要な領域（レイアウト、ペイント、コンポジット）に分割されており、このツールはさまざまなブラウザのどのCSSプロパティによってトリガされるのかを示します。 WebkitとGeckoの情報にはいくつかの問題があることに注意してください（GitHubのthis issueを参照してください）が、全体的にはこれは素晴らしいリソースです。

ブラウザベンダーは常に最適化しているため、開発者は過去に読んだ静的情報に常に頼るとは限らないため、このようなツールは情報源となるはずです。

このツールのデータ取得方法が不明な場合は、source codeをご覧ください。完全に自動化された一連のテストを使用して、さまざまなブラウザエンジンにアクセスし、理論的には常に最新のものにする必要があります。

このツールはGoogle開発者に推奨されているため、ダウンすることはほとんどありませんが、その場合は上にリンクされているソースコードから自分で構築することができます。

レイアウト（およびレイヤーツリー）の更新に費やす時間については、簡単な答えはありません。アプリ内にあるDOM要素の数は、各レイアウトの所要時間に影響を与える可能性があり、レイアウト情報を繰り返し更新してクエリすることで、「レイアウトスラッシング」をトリガーすることも可能です。これにより、ブラウザはこのステップでかなりの時間を費やす可能性があります。特定のパフォーマンス上の問題が懸念される場合は、ブラウザのパフォーマンスツールを使用して自分のアプリで実際に何が起きているのかを測定するのが最善の方法です。