Der Kontinuierliche Painting-Modus für die Profilerstellung ist jetzt in Chrome Canary verfügbar. In diesem Artikel wird erläutert, wie Sie ein Problem bei der Painting-Zeit erkennen und mit diesem neuen Tool Engpässe bei der Painting-Leistung erkennen.
Painting-Zeit auf Ihrer Seite ermitteln
Also haben Sie festgestellt, dass Ihre Seite nicht reibungslos scrollt. So könnten Sie anfangen, das Problem anzugehen. Für unser Beispiel verwenden wir die Demoseite Things We Left On The Moon von Dan Cederholm.
Sie öffnen den Web Inspector, starten eine Zeitachsenaufzeichnung und scrollen auf der Seite nach oben und unten. Dann schauen Sie sich die vertikalen Zeitachsen an, die Ihnen zeigen, was in jedem Frame passiert ist.
Wenn Sie feststellen, dass die meiste Zeit mit dem Malen verbracht wird (große grüne Balken über 60 fps), müssen Sie genauer untersuchen, warum dies geschieht. Mit der Einstellung Show color Rectangles (Farbrechtecke anzeigen) des Web Inspectors (Zahnradsymbol rechts unten im Web Inspector) können Sie die Farben untersuchen. Dadurch werden die Regionen angezeigt, in denen Chrome gestrichen wird.
Es gibt verschiedene Gründe, warum Chrome bestimmte Bereiche einer Seite übermalt:
- DOM-Knoten werden in JavaScript geändert, wodurch Chrome das Layout der Seite neu berechnet.
- Animationen werden abgespielt und in einem Frame-basierten Zyklus aktualisiert.
- Nutzerinteraktionen, z. B. das Bewegen des Mauszeigers, führen zu Stiländerungen bei bestimmten Elementen.
- Jeder andere Vorgang, der eine Änderung des Seitenlayouts bewirkt.
Als Entwickler müssen Sie wissen, welche grafischen Darstellungen auf Ihrer Seite vorgenommen werden.
Ein Blick auf die Farbrechtecke ist eine gute Möglichkeit, dies zu erreichen. Im obigen Beispiel-Screenshot sehen Sie, dass der gesamte Bildschirm von einem großen Farbrechteck verdeckt wird. Das bedeutet, dass beim Scrollen der gesamte Bildschirm neu gezeichnet wird, was nicht gut ist. In diesem speziellen Fall ist dies auf den CSS-Stil background-attachment:fixed zurückzuführen, der dazu führt, dass das Hintergrundbild der Seite an derselben Position bleibt, während sich der Inhalt der Seite beim Scrollen über das Bild bewegt.
Wenn Sie feststellen, dass die Farben einen großen Bereich abdecken und/oder lange dauern, haben Sie zwei Möglichkeiten:
- Sie können versuchen, das Seitenlayout zu ändern, um die Anzahl der Bilder zu reduzieren. Wenn möglich, zeichnet Chrome die sichtbare Seite nur einmal auf und fügt Teile hinzu, die beim Scrollen nach unten nicht sichtbar waren. Es gibt jedoch Fälle, in denen Chrome bestimmte Bereiche aktualisieren muss. Die CSS-Regel
position:fixed, die häufig für Navigationselemente verwendet wird, die an derselben Position bleiben, kann beispielsweise zu diesen Aktualisierungsvorgängen führen. - Wenn Sie Ihr Seitenlayout beibehalten möchten, können Sie die Malkosten der Bereiche, die neu gezeichnet werden, reduzieren. Nicht jeder CSS-Stil hat die gleichen Painting-Kosten, einige haben geringe Auswirkungen, andere eine große Wirkung. Die Kosten für bestimmte Stile zu ermitteln, kann viel Arbeit bedeuten. Wechseln Sie dazu im Bereich „Elemente“ zwischen den Stilen und sehen Sie sich den Unterschied in der Zeitachsenaufzeichnung an, d. h., zwischen den Feldern wechseln und viele Aufnahmen erstellen. Hier kommt der kontinuierliche Malmodus ins Spiel.
Kontinuierlicher Painting-Modus
Der Kontinuierliche Painting-Modus ist ein Tool, mit dem Sie ermitteln können, welche Elemente auf der Seite teuer sind. Dabei wird die Seite in einen ständig neu dargestellten Zustand versetzt, in dem ein Zähler angezeigt wird, der angibt, wie viel Aufwand für das Malen entsteht. Anschließend können Sie Elemente und Stile ausblenden und den Zähler beobachten, um herauszufinden, was langsam ist.
Einrichtung
Für den kontinuierlichen Malmodus müssen Sie Chrome Canary verwenden.
Bei Linux-Systemen (und einigen Macs) müssen Sie darauf achten, dass Chrome im Erstellungsmodus ausgeführt wird. Diese Funktion kann dauerhaft aktiviert werden, indem Sie in about:flags die Einstellung GPU-Compositing auf allen Seiten verwenden.
Einstieg
Der Kontinuierliche Painting-Modus kann in den Einstellungen des Web Inspectors über das Kästchen Kontinuierliche Seitendarstellung aktivieren aktiviert werden (Zahnradsymbol rechts unten im Web Inspector).
Auf dem kleinen Display oben rechts werden die gemessenen Farbzeiten in Millisekunden angezeigt. Genauer gesagt enthält sie Folgendes:
- Die zuletzt gemessene Paint-Zeit (links).
- Der Mindest- und Höchstwert der aktuellen Grafik auf der rechten Seite.
- Ein Balkendiagramm mit dem Verlauf der letzten 80 Frames unten (die Linie im Diagramm zeigt 16 ms als Referenzpunkt an).
Die Messung der Farbdauer hängt von der Bildschirmauflösung, der Fenstergröße und der Hardware ab, auf der Chrome ausgeführt wird. Beachten Sie, dass diese Dinge für Ihre Nutzenden wahrscheinlich anders sein werden.
Workflow
So können Sie den kontinuierlichen Painting-Modus verwenden, um Elemente und Stile zu finden, die hohe Painting-Kosten verursachen:
- Öffnen Sie die Einstellungen des Web Inspectors und aktivieren Sie die Option Kontinuierliche Seitenaktualisierung aktivieren.
- Gehen Sie zum Steuerfeld „Elemente“ und durchlaufen Sie den DOM-Baum mit den Pfeiltasten oder durch Auswählen von Elementen auf der Seite.
- Mit der neuen Hilfsfunktion H können Sie die Sichtbarkeit eines Elements ein- oder ausschalten.
- Sehen Sie sich das Farbdiagramm an und versuchen Sie, ein Element zu erkennen, das viel Zeit für das Zeichnen benötigt.
- Gehen Sie die CSS-Stile dieses Elements durch und schalten Sie sie ein und aus, während Sie sich die Grafik ansehen, um den Stil zu finden, der die Verlangsamung verursacht.
- Ändern Sie diesen Stil und nehmen Sie eine weitere Aufnahme der Zeitachse vor, um zu prüfen, ob dies dazu geführt hat, dass Ihre Seite besser abschneidet.
Die folgende Animation zeigt das Wechseln zwischen Stilen und ihre Auswirkungen auf die Paint-Zeit:
In diesem Beispiel wird gezeigt, wie durch Deaktivieren des CSS-Stils box-shadow oder border-radius die Painting-Zeit erheblich verkürzt wird. Die Verwendung von box-shadow und border-radius für ein Element führt zu sehr kostenintensiven Painting-Vorgängen, da Chrome nicht dafür optimiert werden kann. Wenn Sie also ein Element haben, das wie im Beispiel häufig übermalt wird, sollten Sie diese Kombination vermeiden.
Hinweise
Im Modus "Kontinuierliche Malerei" wird die gesamte sichtbare Seite neu gestaltet. Dies ist beim Surfen auf einer Webseite normalerweise nicht der Fall. Beim Scrollen werden nur die Teile gezeichnet, die zuvor nicht sichtbar waren. Bei anderen Änderungen auf der Seite wird nur der kleinstmögliche Bereich neu gezeichnet. Prüfen Sie also mit einer weiteren Aufzeichnung der Zeitachse, ob sich Ihre Stilverbesserungen auf die Darstellungszeiten Ihrer Seite ausgewirkt haben.
Wenn Sie continuous painting mode verwenden, stellen Sie möglicherweise fest, dass z.B. die CSS-Stile border-radius und box-shadow viel Zeit für das Zeichnen verursachen. Es ist nicht zu entmutigen, diese Funktionen im Allgemeinen zu verwenden. Sie sind großartig und wir freuen uns, dass sie endlich da sind. Aber es ist wichtig zu wissen, wann und wo man sie verwenden sollte.
Vermeide es, sie in Bereichen mit vielen Lackierungen zu verwenden, und vermeide zu häufigen Gebrauch.
Live-Demo
Klicken Sie unten, um eine Demo zu sehen, in der Paul Irish mithilfe der fortlaufenden Malerei einen einmalig teuren Farbvorgang identifiziert.