Der Modus für kontinuierliches Malen für das Malprofil ist jetzt in Chrome Canary verfügbar. In diesem Artikel wird erläutert, wie Sie ein Problem mit der Seitendarstellungszeit erkennen und wie Sie mit diesem neuen Tool Engpässe bei der Darstellungsleistung erkennen können.
Dauer des Ladens Ihrer Seite prüfen
Sie haben festgestellt, dass Ihre Seite nicht flüssig scrollt. So würden Sie das Problem angehen. In unserem Beispiel verwenden wir die Demoseite Things We Left On The Moon von Dan Cederholm.
Sie öffnen den Web-Inspektor, starten eine Zeitachse und scrollen auf der Seite nach oben und unten. Dann sehen Sie sich die vertikalen Zeitachsen an, die zeigen, was in jedem Frame passiert ist.
Wenn Sie sehen, dass die meiste Zeit für das Zeichnen aufgewendet wird (große grüne Balken über 60 fps), sollten Sie sich genauer ansehen, warum das so ist. Wenn Sie Ihre Farben untersuchen möchten, verwenden Sie die Einstellung Paint rectangles anzeigen (Zahnradsymbol rechts unten im Web-Inspektor). Daraufhin werden die Bereiche angezeigt, in denen Chrome zeichnet.
Es gibt verschiedene Gründe, warum Chrome Bereiche der Seite neu zeichnet:
- DOM-Knoten werden in JavaScript geändert, wodurch Chrome das Layout der Seite neu berechnet.
- Es werden Animationen abgespielt, die in einem framebasierten Zyklus aktualisiert werden.
- Nutzerinteraktionen wie das Bewegen des Mauszeigers über ein Element führen zu Stiländerungen bei bestimmten Elementen.
- Alle anderen Vorgänge, die das Seitenlayout ändern.
Als Entwickler müssen Sie sich der Neuzeichnungen auf Ihrer Seite bewusst sein.
Die Rechtecke für die Füllung sind dafür eine gute Möglichkeit. Im Beispielscreenshot oben sehen Sie, dass der gesamte Bildschirm mit einem großen Rechteck aus Paint bedeckt ist. Das bedeutet, dass der gesamte Bildschirm beim Scrollen neu gerendert wird, was nicht gut ist. In diesem Fall wird das durch den CSS-Stil background-attachment:fixed verursacht, wodurch das Hintergrundbild der Seite an derselben Position bleibt, während sich der Inhalt der Seite beim Scrollen darüber bewegt.
Wenn Sie feststellen, dass die Übermalungen ein großes Gebiet abdecken und/oder viel Zeit in Anspruch nehmen, haben Sie zwei Möglichkeiten:
- Sie können versuchen, das Seitenlayout zu ändern, um die Menge der Malerei zu reduzieren. Nach Möglichkeit wird die sichtbare Seite nur einmal gerendert und beim Scrollen nach unten werden Teile hinzugefügt, die zuvor nicht sichtbar waren. Es gibt jedoch Fälle, in denen Chrome bestimmte Bereiche neu zeichnen muss. Die CSS-Regel
position:fixed, die häufig für Navigationselemente verwendet wird, die an derselben Position bleiben, kann beispielsweise zu diesen Neuzeichnungen führen. - Wenn Sie Ihr Seitenlayout beibehalten möchten, können Sie versuchen, die Malkosten für die zu übermalenden Bereiche zu senken. Nicht jeder CSS-Stil hat dieselben Malkosten. Einige haben nur geringe Auswirkungen, andere sehr große. Die Ermittlung der Malkosten für bestimmte Stile kann viel Arbeit bedeuten. Dazu können Sie im Bereich „Elemente“ zwischen den Stilen wechseln und sich die Unterschiede in der Zeitachsenaufzeichnung ansehen. Das bedeutet, dass Sie zwischen den Bereichen wechseln und viele Aufzeichnungen machen müssen. Hier kommt der Modus für kontinuierliches Malen ins Spiel.
Modus für kontinuierliches Malen
Der Modus für kontinuierliches Zeichnen ist ein Tool, mit dem Sie ermitteln können, welche Elemente auf der Seite leistungsintensiv sind. Die Seite wird in einen Zustand versetzt, in dem sie immer neu gemalt wird. Dabei wird ein Zähler angezeigt, der angibt, wie viele Malvorgänge gerade ausgeführt werden. Anschließend können Sie Elemente ausblenden und Stile ändern und dabei den Zähler beobachten, um herauszufinden, was langsam ist.
Einrichtung
Wenn Sie den Modus für kontinuierliches Malen verwenden möchten, müssen Sie Chrome Canary verwenden.
Auf Linux (und einigen Macs) muss Chrome im Kompositionierungsmodus ausgeführt werden. Sie können diese Funktion unter about:flags in der Einstellung GPU-Komposition auf allen Seiten dauerhaft aktivieren.
Erste Schritte
Der Modus für kontinuierliches Zeichnen kann in den Einstellungen des Web-Inspektors (Zahnradsymbol rechts unten im Web-Inspektor) über das Kästchen Kontinuierliches Neuzeichnen der Seite aktivieren aktiviert werden.
Auf dem kleinen Display rechts oben werden die gemessenen Zeichnenzeiten in Millisekunden angezeigt. Im Detail sehen Sie Folgendes:
- Die letzte gemessene Paint-Zeit links.
- Das Minimum und Maximum der aktuellen Grafik rechts.
- Ein Balkendiagramm, das unten den Verlauf der letzten 80 Frames anzeigt (die Linie im Diagramm gibt 16 ms als Referenzpunkt an).
Die Messungen der Malzeit hängen 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 Nutzer wahrscheinlich anders sind.
Workflow
So können Sie mit dem Modus für kontinuierliches Malen Elemente und Stile finden, die die Malkosten in die Höhe treiben:
- Öffnen Sie die Einstellungen des Web-Inspektors und setzen Sie ein Häkchen bei Continuous page repainting enable (Kontinuierliches Neuzeichnen der Seite aktivieren).
- Rufen Sie den Bereich „Elemente“ auf und durchsuchen Sie den DOM-Baum mit den Pfeiltasten oder indem Sie Elemente auf der Seite auswählen.
- Mit der Tastenkombination H können Sie die Sichtbarkeit eines Elements ein- und ausschalten.
- Sehen Sie sich das Diagramm mit der Malzeit an und versuchen Sie, ein Element zu finden, das viel Malzeit in Anspruch nimmt.
- Sehen Sie sich die CSS-Stile dieses Elements an und aktivieren oder deaktivieren Sie sie, während Sie sich das Diagramm ansehen, um den Stil zu finden, der die Verzögerung verursacht.
- Ändern Sie diesen Stil und führen Sie eine weitere Zeitachsenaufzeichnung durch, um zu prüfen, ob sich die Leistung Ihrer Seite dadurch verbessert hat.
Die folgende Animation zeigt das Umschalten von Stilen und die Auswirkungen auf die Malzeit:
In diesem Beispiel wird gezeigt, wie sich die Malzeit erheblich verringert, wenn einer der CSS-Stile box-shadow oder border-radius deaktiviert wird. Wenn Sie sowohl box-shadow als auch border-radius für ein Element verwenden, führt dies zu sehr teuren Malvorgängen, da Chrome dies nicht optimieren kann. Wenn Sie also ein Element haben, das wie im Beispiel häufig neu gerendert wird, sollten Sie diese Kombination vermeiden.
Hinweise
Im Modus für kontinuierliches Malen wird die gesamte sichtbare Seite neu gemalt. Das ist beim Surfen auf einer Webseite in der Regel nicht der Fall. Beim Scrollen werden in der Regel nur die Teile gerendert, die zuvor nicht sichtbar waren. Bei anderen Änderungen auf der Seite wird nur der kleinstmögliche Bereich neu gerendert. Prüfen Sie mit einer weiteren Zeitachsenaufzeichnung, ob sich Ihre Stilverbesserungen tatsächlich auf die Malzeiten 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 die Malzeit erheblich verlängern. Wir möchten dich aber nicht davon abhalten, diese Funktionen zu verwenden. Sie sind großartig und wir freuen uns, dass sie endlich verfügbar sind. Es ist jedoch wichtig zu wissen, wann und wo sie verwendet werden sollten.
Verwenden Sie sie nicht in Bereichen mit vielen Übermalungen und vermeiden Sie es, sie im Allgemeinen zu häufig zu verwenden.
Live-Demo
Klicken Sie unten auf die Demo, in der Paul Irish die kontinuierliche Malerei verwendet, um einen besonders teuren Malvorgang zu identifizieren.