CSS-Malzeiten und Seitenrendergewicht

HINWEIS: Dieser Artikel enthält eine numerische Auswertung aus einem bestimmten Build eines Browsers. Im Laufe der Zeit ändern sich diese Zahlen ebenso wie die hier angegebenen Daten.

Einführung

Wenn Sie der Typ sind, der mit der Funktionsweise von Browsern Schritt hält , wissen Sie bereits, dass es in letzter Zeit einige erstaunliche Artikel gibt, in denen die GPU-beschleunigte Renderer- / Composite-Operation von Chrome beschrieben wird. Erstens beschleunigtes Rendern in Chrome: Das Ebenenmodell ist eine hervorragende Einführung in die Verwendung des Ebenenkonzepts durch Chrome zum Zeichnen der Seite. und für einen tieferen Einblick in GPU Accelerated Compositing in Chrome wird erläutert, wie Chrome diese Ebenen neben der GPU zum Rendern Ihrer Seite verwendet.

Die schnelle Version dieses Artikel ist , dass die Hardware - Pfad in Chrome beschleunigt wird Farbe Ihrer Seite , indem Sie die Seite Visuals in Kacheln Rastern. Diese Kacheln werden dann an die GPU weitergeleitet, wo die Hardware das endgültige Zeichnen der Kacheln auf dem Bildschirm vornimmt . Dieser Vorgang wird als Compositing bezeichnet . Chrome verschiebt die Kacheln je nach Bedarf und Leistungsheuristiken, die sich zwischen den Plattformen ändern können, in den Speicher und aus dem Speicher.

Die philosophische Frage

Nachdem ich viel Zeit damit verbracht hatte, Software-Rasterizer für 3D-Zwecke zu schreiben , wurde mir klar, dass einige CSS-Eigenschaften beim Zeichnen Ihrer Seite eine unterschiedliche Leistung aufweisen sollten. Das Rasteren eines kleinen Bilds auf dem Bildschirm ist beispielsweise eine völlig andere algorithmische Operation als das Zeichnen eines Schlagschattens auf einer beliebigen Form. Die Frage lautete also: Wie wirken sich verschiedene CSS-Eigenschaften auf das Rendergewicht Ihrer Seite aus?

Mein Ziel war es, eine große Anzahl von CSS-Eigenschaften / -Werten nach ihren Malzeiten zu kategorisieren, damit wir verstehen, welche Arten von CSS-Eigenschaften leistungsfähiger sind als andere. Zu diesem Zweck habe ich eine Automatisierung mit Klebeband und Kaugummi geschrieben, um zu versuchen, die CSS-Malzeiten numerisch sichtbarer zu machen. Dies funktionierte folgendermaßen:

• Generieren Sie eine Suite einzelner HTML-Seiten. jedes mit einem einzelnen DOM-Element und einer damit verbundenen Permutation von CSS-Eigenschaften.
• Führen Sie ein Automatisierungsskript aus, das für jede Seite Folgendes ausführt:
  • Starten Sie Chrome
  • Laden Sie eine Seite
  • Erstellen Sie ein Skia-Bild für die Seite
  • Führen Sie jedes Skia-Bild aus, das über den Skia-Benchmark aufgenommen wurde , um die Zeitangaben zu erhalten
• Lassen Sie alle Timings fallen und staunen Sie über die Zahlen. (Dieser Teil ist wichtig ..)

Das Software-Rasterizer-Paket von Chrome heißt SKIA und verwaltet nicht nur die Rasterisierung Ihrer Webseite, sondern auch alle Ihre Anforderungen an die HTML5-Canvas-API (Felder, Linien, Bitmap-Füllungen, Schlagschatten, Unschärfen, alle Aufrufe, die Chrome benötigt, um Ihr DOM zu verwandeln Pixel). Um das Debuggen des Renderns einer Seite zu erleichtern, können Sie mit SKIA Skia Picture- Dateien (* .SKP) speichern, in denen alle zum Zeichnen der Seite verwendeten Befehle aufgezeichnet sind .

Mit diesem Setup 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 { Hintergrund : URL ( foo.png ) oben links / 50% 60% ; Polsterung : 20px ; Rand oben : 10px ; Rand rechts : 20px ; Textausrichtung : Mitte ; }  
 WOAH 

     
    

Und noch etwas, das ist komplexer

<style> # example1 { Hintergrundfarbe : #eee ; Kastenschatten : 1px 2px 3px 4px schwarz ; Randradius : 50% ; Hintergrund : Radialgradient ( Kreis nächste Ecke , weiß , schwarz ); Polsterung : 20px ; Rand oben : 10px ; Rand rechts : 20px ; Textausrichtung : Mitte ; } 

    
 WOAH  
    
    

Unten als Variante des letzten Beispiels, in dem wir nur den Radialgradientenwert ändern:

<style> # example1 
 { Hintergrundfarbe : #eee ; Kastenschatten : 1px 2px 3px 4px schwarz ; Randradius : 50% ; Hintergrund : Radialgradient ( am weitesten entfernt , weiß , schwarz ); Polsterung : 20px ; Rand oben : 10px ; Rand rechts : 20px ; Textausrichtung : Mitte ; } 

    
 WOAH         

Jede Seite wird dann in eine neue Instanz von Chrome geladen (um sicherzustellen, dass die Timings beim erneuten Laden von Seiten nicht durch veraltete Zustände verzerrt wurden), und ein Skia-Bild (* .SKP) wird erstellt, um zu bewerten, welche Skia-Befehle zum Malen verwendet werden Die Seite. Sobald für jede HTML-Datei SKP-Dateien generiert wurden, führen wir einen weiteren Stapel aus, um die * .SKP-Dateien durch die Skia-Benchmark-Anwendung (erstellt aus dem Skia-Quellcode ) zu übertragen, die die durchschnittliche Zeit für das Rendern dieser Seite angibt .

Auswertung der Daten

Daraus können wir nun grob darstellen, wie viel eine Suite von CSS-Eigenschaften zum Malen benötigt. Oder besser gesagt, wir können beginnen, CSS-Eigenschaften anhand ihrer Malleistung zu stapeln. Hier ist eine große Grafik, die mit Chrome 27 Beta erstellt wurde und alle Timing-Daten dieses Prozesses zeigt. Beachten Sie, dass sich alle Daten ändern können, da Chrome mit der Zeit immer schneller wird.

Jeder vertikale Balken repräsentiert die Malzeit einer Seite mit einer einzelnen Kombination von CSS-Eigenschaften (um das 100-fache vergrößert; der True-Scale-Wert dieses Diagramms beträgt [0,1,56 ms]). Viele hübsche Linien, aber in dieser Form ist es etwas nutzlos; Wir müssen Data Mining durchführen, 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 Schlagschattens auf einem DOM-Element umfasst beispielsweise eine Mehrfachdurchlaufoperation mit Splines und anderen unangenehmen Dingen, im Gegensatz zu einer Deckkraft, die einfacher zu rendern sein sollte.

Zweitens und interessanterweise können Kombinationen von CSS-Eigenschaften eine längere Malzeit haben als die Summe ihrer Teile . Aus der Sicht eines Beobachters ist dies etwas seltsam. Wir würden erwarten, dass A + B = C ist, nicht 2.2C. Zum Beispiel Hinzufügen box-shadowund border-radius-stroke:

Das wirklich Interessante daran ist, dass es nicht nur die box-shadowEigenschaft selbst ist, sondern vielmehr diese spezifische Wertpermutation . Im Folgenden wird beispielsweise eine Gruppierung von box-shadow : 50%und border-radiusmit Wertvariationen gezeigt.

Wenn man sich die Daten ansieht, geht das noch eine Weile so. Es gibt viele verschiedene seltsame Kombinationen, und meine Testsuite berührt sie kaum alle. Es gibt immer noch unzählige Tests und Kombinationen, die interessante Ergebnisse liefern könnten

Finden des Seiten-Rendergewichts

Mit der Möglichkeit, die Renderzeiten für jedes Element auf Ihrer Seite zu verfolgen, können Entwickler damit beginnen, das Seiten-Rendergewicht und die Auswirkungen auf die Reaktionsfähigkeit Ihrer Website zu bewerten. Hier sind ein paar Tipps, um loszulegen

1. Verwenden Sie den Continuous Paint-Modus von Chrome in den Chrome Dev Tools, um zu verstehen, welche CSS-Eigenschaften Sie kosten.
2. Integrieren Sie CSS-Überprüfungen in Ihren vorhandenen Codeüberprüfungsprozess, um Leistungsprobleme zu erkennen. Suchen Sie in Ihrem CSS nach Stellen, an denen Sie Dinge verwenden, die bekanntermaßen teurer sind, wie z. B. Farbverläufe und Schatten. Fragen Sie sich, brauche ich diese hier wirklich?
3. Im Zweifelsfall immer auf der Seite einer besseren Leistung irren. Ihre Benutzer erinnern sich möglicherweise nicht an die Auffüllbreite Ihrer Spalten, aber sie werden sich daran erinnern, wie es sich anfühlt, Ihre Website zu besuchen.

Leider ist es derzeit ohne ein benutzerdefiniertes Timing-Setup wie das erstellte schwierig, den Prozess des Ermittelns des Seitenrender-Gewichts zu automatisieren, was es schwierig macht, eine kontinuierliche Integration für Ihre Seitenerstellungen über Plattformen hinweg zu ermöglichen.

Abschließende Gedanken

Eines der interessantesten Dinge an diesem Experiment ist, dass sich die Timings mit jeder Version von Chrome weiter ändern (hoffentlich schneller;). Die Browsersoftware ist eine sich ständig ändernde Oberfläche. Was heute langsam ist, könnte morgen schnell sein. Sie können diesen Artikel entfernen, um zu vermeiden, dass box-shadow: 1px 2px 3px 4px ein Element eingefügt wird, das bereits vorhanden ist border-radius:5. Der wertvollere Aspekt sollte jedoch sein, dass sich CSS-Eigenschaften direkt auf die Malzeiten Ihrer Seite auswirken.

Stellen Sie wie bei jeder Software sicher, dass Sie alle Entwurfsoptionen anhand Ihrer Leistungsziele und Plattformen testen, um die Gültigkeit in Ihren eigenen Anwendungen zu bestimmen, bevor Sie Entwurfsentscheidungen treffen.