Welche Aktionen lösen 'Update layer tree' aus?

Schauen Sie sich Ссылка

Dies ist ein Tool, das von einigen Google-Ingenieuren erstellt wurde ( Paul und Surma ), die die Frage" Wenn ich eine bestimmte CSS-Eigenschaft ändere, welche Arbeit wird der Browser tun müssen? " Die Browser-Arbeit ist in drei Hauptbereiche unterteilt (Layout, Farbe und Zusammensetzung), und dieses Tool gibt an, was durch welche CSS-Eigenschaften in verschiedenen Browsern ausgelöst wird. Beachten Sie, dass einige Probleme mit Webkit und Gecko gemeldet wurden (siehe dieses Problem auf GitHub), aber insgesamt Das ist eine großartige Ressource.

Ein Tool wie dieses sollte die erste Informationsquelle sein, da Browser-Hersteller immer Dinge optimieren und ein Entwickler sich nicht immer auf statische Informationen verlassen kann, die sie in der Vergangenheit gelesen haben.

Wenn Sie wissen möchten, wie dieses Tool seine Daten erfasst, können Sie sich den Quellcode ansehen. Es nutzt eine Reihe von vollautomatischen Tests, um verschiedene Browser-Engines zu nutzen und sollte theoretisch immer auf dem neuesten Stand sein.

Da dieses Tool von den Befürwortern von Google-Entwicklern empfohlen wird, ist es unwahrscheinlich, dass es jemals untergeht, aber in dem Fall können Sie es immer selbst aus dem oben verlinkten Quellcode erstellen.

In Bezug darauf, wie viel Zeit für das Aktualisieren des Layouts (und der Ebenenbäume) aufgewendet wird, gibt es keine einfache Antwort. Die Anzahl der DOM-Elemente in Ihrer App kann sich darauf auswirken, wie lange jedes Layout dauert, und es ist auch möglich, "Layout-Thrashing" durch wiederholtes Aktualisieren und Abfragen von Layout-Informationen auszulösen. Dies kann dazu führen, dass der Browser in diesem Schritt wesentlich mehr Zeit benötigt. Wenn Sie sich über ein bestimmtes Leistungsproblem Sorgen machen, besteht der beste Ansatz darin, mithilfe von Browser-Leistungstools zu messen, was tatsächlich in Ihrer eigenen App geschieht.