CSS-Zeichenzeiten und -Rendering-Gewichtung

Colt McAnlis
Colt McAnlis
X Startseite

Einführung

Wenn Sie zu den Menschen gehören, die sich u. a. mit der Funktionsweise von Browsern beschäftigen, dann wissen Sie ja bereits, dass es in letzter Zeit spannende Artikel veröffentlicht hat, in denen der GPU-beschleunigte Renderer/Zusammengesetzte Betrieb von Chrome beschrieben wird. Accelerated Rendering in Chrome: The Layer Model ist eine gute Einführung in die Verwendung des Layers-Konzepts in Chrome zum Zeichnen von Seiten. GPU Accelerated Compositing in Chrome bietet einen detaillierteren Einblick in die Verwendung dieser Layers in Chrome zusammen mit der GPU für das Rendern von Seiten.

Die philosophische Frage

Nachdem ich viel Zeit damit verbracht hatte, Softwareraster für 3D-Zwecke zu schreiben, wurde mir klar, dass einige CSS-Eigenschaften beim Zeichnen einer Seite unterschiedliche Leistungen erbringen sollten. Das Rastern eines kleinen Bilds auf dem Bildschirm ist beispielsweise ein völlig anderer algorithmischer Vorgang als das Zeichnen eines Schattens auf eine beliebige Form. Die Frage lautete also: Wie wirken sich verschiedene CSS-Eigenschaften auf die Rendering-Gewichtung Ihrer Seite aus?

Mein Ziel bestand darin, eine große Gruppe von CSS-Eigenschaften/-Werten nach ihren Paint-Times zu kategorisieren, damit wir verstehen können, welche Typen von CSS-Eigenschaften leistungsstärker sind als andere. Dazu habe ich mit Klebeband und Kaugummi eine Automatisierung geschrieben, um die CSS-Malzeiten numerisch sichtbar zu machen. Das funktionierte so:

  • Erstellen Sie eine Reihe einzelner HTML-Seiten, die jeweils ein einzelnes DOM-Element und einige Permutationen von CSS-Eigenschaften enthalten.
  • Führen Sie ein Automatisierungsskript aus, das für jede Seite Folgendes ausführt:
    • Starten Sie Chrome.
    • Seite laden
    • Ein Skia-Bild für die Seite generieren
    • Jedes mit Skia Benchmark aufgenommene Skia-Bild analysieren, um den zeitlichen Ablauf zu ermitteln
  • Sie können alle Timings ausgeben und sich die Zahlen ansehen. (Dieser Teil ist wichtig…)

Bei dieser Konfiguration generieren wir eine Reihe von HTML-Seiten, wobei jede Seite eine eindeutige Permutation von CSS-Eigenschaften und -Werten enthält. Hier sind zum Beispiel zwei HTML-Dateien:

<style>
#example1 {
    background: url(foo.png) top left / 50% 60%;
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

Und noch eine, die noch komplexer ist

<style>
#example1 {
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(circle closest-corner, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

Unten sehen Sie eine Variante des letzten Beispiels, bei der nur der Wert für den Radialgradienten geändert wird:

<style>
#example1 
{
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(farthest-side, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>

Jede Seite wird dann in einer neuen Instanz von Chrome geladen, um sicherzustellen, dass die Zeitmessung nicht durch veraltete Status bei Seitenaktualisierungen verzerrt wird. Anschließend wird ein Skia-Bild (*.SKP) erstellt, um zu ermitteln, welche Skia-Befehle zum Zeichnen der Seite verwendet werden. Nachdem die SKP-Dateien für jede HTML-Datei generiert wurden, führen wir einen weiteren Batch aus, um die SKP-Dateien über die Skia Benchmark-Anwendung zu übertragen, die aus dem Skia-Quellcode erstellt wurde. Dadurch wird die durchschnittliche Zeit ausgegeben, die zum Rendern der Seite benötigt wurde.

Daten auswerten

So können wir jetzt grob nachvollziehen, wie lange das Rendern einer Reihe von CSS-Eigenschaften dauert. Stattdessen können wir CSS-Eigenschaften anhand ihrer Paint-Leistung in Stapel-Rankings einstufen. In dieser großen Grafik, die mit Chrome 27 Beta erstellt wurde, sind alle Zeitdaten dieses Vorgangs zu sehen. Alle Daten können sich ändern, da Chrome mit der Zeit immer schneller wird.

Zeitangaben für alle Permutationen im Test

Jeder vertikale Balken steht für die Malzeit einer Seite mit einer einzelnen Kombination von CSS-Eigenschaften (100-fach vergrößert; der Wert in Originalgröße dieses Diagramms beträgt 0,156 ms). Viele schöne Linien, aber in dieser Form sind sie ziemlich nutzlos. Wir müssen einige Daten analysieren, um nützliche Trends zu finden.

Erstens finden wir den Beweis, dass einige CSS-Eigenschaften einfach teurer zu rendern sind als andere. Das Zeichnen eines Schattens auf einem DOM-Element erfordert beispielsweise einen mehrstufigen Vorgang mit Splines und anderen fiesen Dingen, im Gegensatz zur Deckkraft, die einfacher zu rendern sein sollte.

Zeit, die zum Zeichnen eines Elements mit nur einer CSS-Eigenschaft benötigt wird

Zweitens, was interessanter ist, können Kombinationen von CSS-Eigenschaften länger dauern als die Summe ihrer Teile. Aus der Sicht eines Beobachters ist das etwas seltsam. Wir würden erwarten, dass A + B = C ist, nicht 2,2 C. So fügen Sie beispielsweise box-shadow und border-radius-stroke hinzu:

Zeitangaben für alle Permutationen im Test

Das Interessante daran ist, dass es sich nicht nur um die box-shadow-Eigenschaft selbst handelt, sondern um diese bestimmte Wertpermutation. Das folgende Beispiel zeigt eine Gruppierung von box-shadow : 50% und border-radius mit unterschiedlichen Werten.

Timings für alle Permutationen im Test

Die Daten zeigen, dass dies eine Weile dauert. Es gibt viele verschiedene Kombinationen, die in meiner Testsuite kaum abgedeckt werden. Es gibt noch viele Tests und Kombinationen, die interessante Ergebnisse liefern könnten.

Seiten-Rendergewicht ermitteln

Da Entwickler die Renderzeiten für jedes Element auf der Seite erfassen können, können sie das Gewicht der Seitendarstellung und die Auswirkungen auf die Responsivität der Website bewerten. Hier sind einige Tipps für den Einstieg:

  1. Mit dem Continuous Paint-Modus in den Chrome-Entwicklertools können Sie nachvollziehen, welche CSS-Eigenschaften die Leistung beeinträchtigen.
  2. Integrieren Sie CSS-Überprüfungen in Ihren bestehenden Codeüberprüfungsprozess, um Leistungsprobleme zu erkennen. Suchen Sie in Ihrem CSS nach Stellen, an denen Sie bekanntermaßen teurere Elemente verwenden, wie Farbverläufe und Schatten. Fragen Sie sich, ob Sie diese Elemente wirklich benötigen.
  3. Im Zweifelsfall sollten Sie immer die Option mit der besseren Leistung auswählen. Ihre Nutzer erinnern sich vielleicht nicht daran, wie breit die Ränder Ihrer Spalten sind, aber sie erinnern sich daran, wie es sich anfühlt, Ihre Website zu besuchen.

Abschließende Hinweise

Eines der interessantesten Dinge an diesem Test ist, dass sich die Zeiten mit jeder Chrome-Version ändern werden (hoffentlich werden sie schneller). Browsersoftware ist ein sich ständig änderndes Thema. Was heute langsam ist, kann morgen auch schnell sein. Aus diesem Artikel können Sie lernen, box-shadow: 1px 2px 3px 4px nicht in ein Element einzufügen, das bereits border-radius:5 enthält. Die wichtigste Erkenntnis sollte jedoch sein, dass sich CSS-Eigenschaften direkt auf die Paint-Zeiten Ihrer Seite auswirken.

Verweise