2016-08-01 49 views

Antwort

1

Check out https://csstriggers.com/

Dies ist ein Werkzeug, um ein paar Google-Ingenieure (Paul und Surma), das beantwortet die Frage: „Wenn ich eine bestimmte CSS-Eigenschaft zu ändern, welche Arbeit wird der Browser gezwungen werden zu tun erstellt wird? " 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 this issue auf GitHub), aber insgesamt ist dies 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 er in der Vergangenheit gelesen hat.

Wenn Sie neugierig sind, wie dieses Tool seine Daten erfasst, können Sie die source code überprüfen. 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 Layoutinformationen 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.

+0

@DonaldDuck Ich weiß, dass eine primär Link-Only-Antwort normalerweise schlechte Form ist, aber in diesem Fall ist die Antwort ein bewegliches Ziel und ich verlinkte zu einem Werkzeug, das entwickelt, um dies zu reflektieren. Ich habe zusätzliche Informationen hinzugefügt, um dies zu beheben. –