Profilerstellung für lange Farbzeiten mit den Entwicklertools im Modus „Continuous Paint“

Paul Irish

Twitter Startseite

Der Kontinuierliche Painting-Modus für die Erstellung von Paint-Profilen ist jetzt in Chrome Canary verfügbar. In diesem Artikel wird erläutert, wie Sie ein Problem bei der Seitendarstellung erkennen und mit diesem neuen Tool Engpässe erkennen.

Malerzeit auf Ihrer Seite untersuchen

Sie haben festgestellt, dass Ihre Seite nicht reibungslos scrollt. So würden Sie anfangen, das Problem anzugehen. In unserem 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. Anschließend sehen Sie sich die vertikalen Zeitachsen an, die zeigen, was in jedem Frame passiert ist.

Wenn Sie feststellen, dass Sie die meiste Zeit mit dem Malen verbringen (große grüne Balken über 60 fps), müssen Sie genauer untersuchen, warum das passiert. Verwenden Sie die Einstellung Farbrechtecke anzeigen im Web Inspector (Zahnradsymbol unten rechts im Web Inspector), um Ihre Farben zu untersuchen. Daraufhin werden die Regionen angezeigt, in denen Chrome gezeichnet wird.

Es gibt verschiedene Gründe dafür, dass Chrome Bereiche der Seite neu koloriert:

• DOM-Knoten werden in JavaScript geändert, was dazu führt, dass Chrome das Layout der Seite neu berechnet.
• Es werden Animationen abgespielt, die in einem Frame-basierten Zyklus aktualisiert werden.
• Nutzerinteraktionen wie das Bewegen des Mauszeigers auf Elemente führen zu Stiländerungen bei bestimmten Elementen.
• Jeder andere Vorgang, der eine Änderung des Seitenlayouts verursacht.

Als Entwickler müssen Sie wissen, wie die Darstellung auf Ihrer Seite aktualisiert wird. Dafür eignet sich ein Blick auf die Farbrechtecke. Im Beispiel-Screenshot oben sehen Sie, dass der gesamte Bildschirm von einem Big Paint bedeckt ist. Das bedeutet, dass beim Scrollen der gesamte Bildschirm neu dargestellt wird, was nicht gut ist. In diesem speziellen Fall liegt dies an dem CSS-Stil background-attachment:fixed. Dieser bewirkt, dass das Hintergrundbild der Seite an derselben Position bleibt, während der Inhalt der Seite beim Scrollen darüber bewegt wird.

Wenn Sie feststellen, dass die Darstellungsdarstellung einen großen Bereich abdeckt und/oder lange dauert, haben Sie zwei Möglichkeiten:

1. Sie können versuchen, das Seitenlayout zu ändern, um den zu übermalenden Aufwand zu reduzieren. Wenn möglich, malt Chrome die sichtbare Seite nur einmal und fügt Teile hinzu, die beim Herunterscrollen nicht sichtbar waren. Es gibt jedoch Fälle, in denen Chrome bestimmte Bereiche neu streichen muss. Solche Darstellungen können beispielsweise die CSS-Regel position:fixed, die oft für Navigationselemente verwendet wird, die an derselben Position bleiben, verursachen.
2. Wenn Sie das Seitenlayout beibehalten möchten, können Sie die Kosten für das Malen in den neu gestrichenen Bereichen reduzieren. Nicht jeder CSS-Stil kostet für das Malen die gleichen Kosten. Einige haben nur geringe Auswirkungen, andere viel. Es kann eine Menge Arbeit sein, die Kosten für das Streichen bestimmter Stile herauszufinden. Wechseln Sie dazu im Steuerfeld „Elemente“ zwischen den Stilen und sehen Sie sich die Unterschiede in der Zeitachse an, d. h., Sie müssen zwischen den Steuerfeldern wechseln und viele Aufnahmen machen. Hier kommt der Modus „Kontinuierliches Malen“ ins Spiel.

Modus „Kontinuierliches Malen“

Der Modus für fortlaufende Malerei ist ein Tool, mit dem Sie feststellen können, welche Elemente auf der Seite kostspielig sind. Die Seite wird ständig neu gestrichen. Es wird ein Zähler angezeigt, der angibt, wie viele Malereiarbeiten durchgeführt werden. Anschließend können Sie Elemente ausblenden und Stile ändern, indem Sie den Zähler beobachten, um herauszufinden, was langsam ist.

Einrichtung

Wenn Sie den Modus „Kontinuierliches Malen“ nutzen möchten, müssen Sie Chrome Canary verwenden.

Auf Linux-Systemen (und einigen Macs) muss Chrome im Erstellungsmodus ausgeführt werden. Dies kann mit der Einstellung GPU-Compositing auf allen Seiten in about:flags dauerhaft aktiviert werden.

So funktioniert's

Sie können den Modus für fortlaufende Zeichnung in den Web Inspector-Einstellungen über das Kästchen Kontinuierliche Seitendarstellung aktivieren aktivieren. Klicken Sie dazu auf das Zahnrad-Symbol rechts unten im Web Inspector.

Auf dem kleinen Display oben rechts sehen Sie die gemessenen Painting-Zeiten in Millisekunden. Genauer gesagt enthält sie Folgendes:

• Die zuletzt gemessene Farbzeit links.
• Rechts der Mindest- und Höchstwert der aktuellen Grafik.
• Ein Balkendiagramm, das unten den Verlauf der letzten 80 Frames anzeigt (die Linie im Diagramm zeigt 16 ms als Referenzpunkt an).

Die Messungen der Farbzeit sind von der Bildschirmauflösung, der Fenstergröße und der Hardware abhängig, 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 Modus „Kontinuierliches Malen“ verwenden, um Elemente und Stile zu finden, die die Kosten für das Malen erhöhen:

1. Öffnen Sie die Einstellungen von Web Inspector und klicken Sie das Kästchen Kontinuierliche Seitenaktualisierung aktivieren an.
2. Gehen Sie zum Steuerfeld „Elemente“ und durchlaufen Sie die DOM-Struktur mit den Pfeiltasten oder durch Auswählen von Elementen auf der Seite.
3. Mit der neuen Hilfsfunktion H können Sie die Sichtbarkeit eines Elements aktivieren oder deaktivieren.
4. Sehen Sie sich das Zeitdiagramm für das Malen an und versuchen Sie, ein Element zu finden, das viel Zeit für das Malen aufzeigt.
5. Gehen Sie die CSS-Stile des Elements durch und aktivieren bzw. deaktivieren Sie sie, während Sie sich die Grafik ansehen, um den Stil zu finden, der die Verlangsamung verursacht.
6. Ändern Sie diesen Stil und nehmen Sie eine weitere Zeitachse auf, um zu prüfen, ob die Leistung Ihrer Seite dadurch verbessert wurde.

Die folgende Animation zeigt das Wechseln zwischen Stilen und ihren Einfluss auf die Farbzeit:

Dieses Beispiel zeigt, wie durch das Deaktivieren eines der CSS-Stile box-shadow oder border-radius die Painting-Zeit erheblich reduziert wird. Die Verwendung von box-shadow und border-radius für ein Element führt zu sehr teuren Painting-Vorgängen, da Chrome hierfür keine Optimierung vornehmen kann. Wenn Sie also ein Element haben, für das viele Darstellungsaktualisierungen erfolgen, wie in diesem Beispiel, sollten Sie diese Kombination vermeiden.

Hinweise

Im Modus „Kontinuierliches Painting“ wird die gesamte sichtbare Seite neu gezeichnet. Dies ist normalerweise nicht der Fall, wenn Sie auf einer Webseite surfen. Beim Scrollen werden meist nur die Teile gemalt, die vorher nicht sichtbar waren. Bei anderen Änderungen auf der Seite wird nur der kleinstmögliche Bereich neu dargestellt. Sehen Sie also in einer Zeitachse nach, ob sich Ihre Stilverbesserungen tatsächlich auf die Farbe der Seite ausgewirkt haben.

Bei der Verwendung von continuous painting mode stellen Sie beispielsweise fest, dass die CSS-Stile border-radius und box-shadow viel Zeit für das Malen verursachen. Es wird nicht davon abgeraten, diese Funktionen im Allgemeinen zu nutzen. Sie sind toll und wir freuen uns, dass sie endlich da sind. Aber es ist wichtig zu wissen, wann und wo sie verwendet werden. Vermeiden Sie die Verwendung in Bereichen mit vielen Darstellungsmalereien und verwenden Sie sie im Allgemeinen nicht zu stark.

Hinweis:Eberhard Gräther studiert MultiMediaTechnology an der Hochschule Salzburg. Zwischen dem 10. und 3. März 2013 im Chrome GPU-Team arbeitete er an Rendering-Tools zur Profilerstellung. Folge ihm auf @egraether oder besuche seine Website, um Grafikdemos und Webspiele zu finden, die er entwickelt hat.

Live-Demo

Klicken Sie unten auf den Link, um eine Demo zu sehen, in der Paul Irish Endlosmalerei verwendet, um ein aufwendiges Malereiunternehmen zu identifizieren.