CSS-Zeichenzeiten und -Rendering-Gewichtung

Colt McAnlis
Colt McAnlis
X Startseite

Einleitung

Wenn Sie zu den Menschen gehören, die immer mit der Funktionsweise von Browsern Schritt halten, wissen Sie bereits, dass es in letzter Zeit einige interessante Artikel über die GPU-beschleunigte Renderer-/zusammengesetzten Funktionsweise von Chrome veröffentlicht haben. Beschleunigtes Rendering in Chrome: Das Ebenenmodell ist eine hervorragende Einführung dafür, wie in Chrome das Konzept der Ebenen zum Zeichnen von Seiten eingesetzt wird. Im Detail wird unter GPU-beschleunigtes Compositing in Chrome erläutert, wie diese Ebenen in Chrome neben der GPU zum Rendern von Seiten verwendet werden.

Die philosophische Frage

Nachdem ich viel Zeit damit verbracht hatte, Software-Raster für 3D-Zwecke zu schreiben, wurde mir klar, dass einige CSS-Eigenschaften beim Zeichnen Ihrer Seite unterschiedliche Leistungen erzielen sollten. Das Rastern eines kleinen Bilds auf dem Bildschirm ist beispielsweise ein völlig anderer algorithmischer Vorgang, bei dem ein Schlagschatten auf eine beliebige Form gezeichnet wird. Daher stellte sich die Frage: Wie beeinflussen verschiedene CSS-Eigenschaften die Rendering-Gewichtung der Seite?

Mein Ziel war es, eine große Anzahl von CSS-Eigenschaften/-Werten nach den Paint-Times zu kategorisieren, damit wir verstehen, welche Arten von CSS-Eigenschaften leistungsfähiger sind als andere. Dazu habe ich eine Automatisierung mit Klebeband und Kaugummi erstellt, um die CSS-Farben für die unterschiedlichen Zeiten sichtbar zu machen. Das funktioniert so:

  • Erstellen Sie eine Suite aus einzelnen HTML-Seiten, von denen jede ein einzelnes DOM-Element und eine gewisse Permutation von CSS-Eigenschaften hat.
  • Führen Sie ein Automatisierungsskript aus, das für jede Seite Folgendes ausführt:
    • Chrome starten
    • Seite laden
    • Erstellen Sie ein Skia-Bild für die Seite.
    • Sieh dir jedes mit Skia Benchmark aufgenommene Skia Picture an, um die Zeitangaben zu ermitteln
  • Lass das Timing raus und bewundere die Zahlen. (Dieser Teil ist wichtig...)

Mit diesem Setup erstellen wir eine Reihe von HTML-Seiten, in denen 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>

Außerdem ist das komplexer,

<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 des radialen Farbverlaufs 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 eine aktuelle Instanz von Chrome geladen, um sicherzustellen, dass das Timing beim Neuladen der Seite nicht durch veraltete Zustände verzerrt ist. Außerdem wird ein Skia Picture (*.SKP) verwendet, um zu bewerten, welche Skia-Befehle zum Darstellen 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 senden (auf der Grundlage des Skia-Quellcodes). Dadurch wird die durchschnittliche Zeit für das Rendering der Seite ausgegeben.

Daten auswerten

Auf diese Weise können wir nun in groben Worten bestimmen, wie viel eine Suite von CSS-Eigenschaften für die Darstellung benötigt. Stattdessen können wir auch CSS-Eigenschaften anhand ihrer Paint-Leistung mit einem Stack-Ranking versehen. Dieses große Diagramm wurde mit Chrome 27 Beta erstellt, das alle Zeitdaten dieses Prozesses zeigt. Beachten Sie, dass sich alle Daten ändern können, da Chrome mit der Zeit schneller und schneller wird.

Timings für alle Varianten im Test

Jeder vertikale Balken stellt die Paint-Time einer Seite mit einer einzelnen Kombination von CSS-Eigenschaften dar (um 100x vergrößert; der tatsächliche Wert dieses Diagramms beträgt 0,1,56 ms). Viele hübsche Linien, aber in dieser Form ist sie etwas nutzlos; wir müssen ein wenig Data-Mining durchführen, um nützliche Trends zu finden.

Zunächst einmal haben wir Beweise dafür, dass das Rendering einiger CSS-Eigenschaften einfach teurer ist als andere. Zum Beispiel erfordert das Zeichnen eines Schlagschattens auf einem DOM-Element einen Vorgang mit mehreren Durchgängen mit Splines und anderen lästigen Dingen, im Gegensatz zur Deckkraft, die sich einfacher rendern lassen sollte.

Zeitaufwand für die Darstellung eines Elements mit nur 1 CSS-Eigenschaft

Außerdem – und noch interessanter – Kombinationen von CSS-Eigenschaften können eine längere Paint-Zeit haben als die Summe ihrer einzelnen Bestandteile. Aus Sicht eines Beobachters ist dies etwas seltsam.Wir erwarten, dass A+B = C, nicht 2, 2 C. Fügen Sie beispielsweise box-shadow und border-radius-stroke hinzu :

Timings für alle Varianten im Test

Interessant daran ist, dass es nicht nur um die box-shadow-Property selbst geht, sondern um diese spezifische Wertpermutation. Das folgende Beispiel zeigt eine Gruppierung von box-shadow : 50% und border-radius mit Wertvariationen.

Timings für alle Varianten im Test

Bei der Betrachtung der Daten geht das eine Weile weiter. Es gibt viele verschiedene seltsame Kombinationen und meine Testsuite trifft kaum alle zu. Es gibt immer noch unzählige Tests und Kombinationen, die interessante Ergebnisse liefern könnten.

Rendering-Gewichtung der Seite ermitteln

Entwickler haben die Möglichkeit, die Rendering-Zeiten für jedes Element auf Ihrer Seite zu verfolgen. So können sie die Gewichtung des Seiten-Renderings bewerten und ermitteln, wie sich dies auf die Reaktionszeit Ihrer Website auswirkt. Hier ein paar Tipps für den Einstieg.

  1. Verwenden Sie den Modus „Continuous Paint“ von Chrome in den Chrome-Entwicklertools, um zu erfahren, welche CSS-Eigenschaften kosten.
  2. CSS-Rezensionen in Ihren vorhandenen Codeüberprüfungsprozess einbinden, um Leistungsprobleme zu erkennen Suchen Sie in Ihrem CSS nach Stellen, an denen Sie bekanntermaßen teurere Dinge wie Farbverläufe und Schatten verwenden. Fragen Sie sich: Brauche ich diese hier wirklich?
  3. Im Zweifelsfall sollten Sie immer auf eine bessere Leistung abzielen. Ihre Nutzer erinnern sich vielleicht nicht an die Breite der Spalten, aber sie erinnern sich daran, wie es sich anfühlt, Ihre Website zu besuchen.

Schlussgedanken

Einer der interessantesten Aspekte dieses Tests ist, dass sich das Timing mit jeder Chrome-Version (der hoffentlich schneller wird) ändern wird. Was heute langsam ist, kann morgen schnell sein. In diesem Artikel erfahren Sie, wie Sie vermeiden, dass box-shadow: 1px 2px 3px 4px einem Element zugewiesen wird, das bereits border-radius:5 enthält. Die wichtigste Erkenntnis ist jedoch, dass sich CSS-Eigenschaften direkt auf die Dauer des Seitenbilds auswirken.

Verweise