Rendering-Leistung

Nutzer bemerken, wenn Websites und Apps nicht richtig funktionieren. Daher ist es wichtig, die Rendering-Leistung zu optimieren.

Paul Lewis

Nutzer des Internets erwarten, dass die von ihnen besuchten Seiten interaktiv und reibungslos sind, und darauf müssen Sie sich zunehmend konzentrieren. Seiten sollten nicht nur schnell geladen werden, sondern auch während des gesamten Lebenszyklus schnell auf Nutzereingaben reagieren. Tatsächlich ist dieser Aspekt der User Experience genau das, was mit dem Messwert Interaction to Next Paint (INP) gemessen wird. Ein gutes INP bedeutet, dass eine Seite konsistent und zuverlässig auf die Anforderungen des Nutzers reagiert hat.

Ein wesentlicher Bestandteil dafür, dass eine Seite knackig wirkt, ist die Menge an JavaScript-Code, der als Reaktion auf Nutzerinteraktionen ausgeführt wird. Nutzer erwarten jedoch visuelle Änderungen an der Benutzeroberfläche. Visuelle Änderungen an einer Benutzeroberfläche sind das Ergebnis verschiedener Arten von Arbeit, die häufig als Rendering bezeichnet werden. Diese Arbeit muss so schnell wie möglich erfolgen, damit die Nutzererfahrung schnell und zuverlässig ist.

Damit Sie Seiten schreiben können, die schnell auf Nutzerinteraktionen reagieren, müssen Sie wissen, wie HTML, JavaScript und CSS vom Browser verarbeitet werden. Außerdem müssen Sie dafür sorgen, dass sowohl der von Ihnen geschriebene Code als auch der von Ihnen eingefügte Drittanbietercode so effizient wie möglich ausgeführt werden.

Hinweis zu den Aktualisierungsraten des Geräts

Die Aktualisierungsrate eines Displays ist ein wichtiger Faktor beim Erstellen von Websites, die auf Nutzereingaben reagieren.

Die meisten Geräte aktualisieren ihre Bildschirme heute 60-mal pro Sekunde. Jede Aktualisierung erzeugt die visuelle Ausgabe, die Sie sehen. Dies wird allgemein als Frame bezeichnet. Im folgenden Video wird das Konzept von Frames demonstriert:

Frames, wie im Leistungsbereich der Chrome-Entwicklertools angezeigt. Während der Cursor über den Filmstreifen am oberen Rand fährt, wird in einer Kurzinfo eine vergrößerte Darstellung jedes Frames angezeigt, während das Navigationsmenü des Mobilgeräts in den Status „Offen“ animiert wird.

Während der Bildschirm eines Geräts immer mit einer konstanten Rate aktualisiert wird, können Anwendungen, die auf einem Gerät ausgeführt werden, nicht unbedingt genügend Frames produzieren, um dieser Aktualisierungsrate zu entsprechen. Wenn beispielsweise eine Animation oder ein Übergang ausgeführt wird, muss der Browser die Aktualisierungsrate des Geräts anpassen, um bei jeder Bildschirmaktualisierung einen Frame zu erzeugen.

Wenn man bedenkt, dass eine typische Anzeige 60-mal pro Sekunde aktualisiert wird, würde eine schnelle Berechnung zeigen, dass der Browser 16,66 Millisekunden hat, um jeden Frame zu erzeugen. In Wirklichkeit hat der Browser jedoch einen eigenen Overhead für jeden Frame, sodass alle Ihre Arbeit innerhalb von 10 Millisekunden abgeschlossen werden muss. Wird dieses Budget nicht erreicht, sinkt die Framerate und die Seiteninhalte ruckeln auf dem Bildschirm. Dieses Phänomen wird oft als Verzögerung bezeichnet.

Die Ziele ändern sich jedoch je nach Art der Arbeit, die Sie ausführen möchten. Die Einhaltung des Grenzwerts von 10 Millisekunden ist entscheidend für Animationen, bei denen die Objekte auf dem Bildschirm über eine Reihe von Frames zwischen zwei Punkten interpoliert werden. Bei diskreten Änderungen in der Benutzeroberfläche, d. h. dem Wechsel von einem Status zum anderen ohne Bewegung dazwischen, empfiehlt es sich, solche Änderungen in einem Zeitraum zu erzielen, der sich für den Nutzer sofort anfühlt. In solchen Fällen werden oft 100 Millisekunden angegeben, aber der „gute“ Schwellenwert des INP-Messwerts liegt bei 200 Millisekunden oder weniger, um einer breiteren Palette von Geräten mit unterschiedlichen Funktionen gerecht zu werden.

Ganz gleich, was Ihre Ziele sind – ob sie die vielen Frames produzieren, die für Animationen erforderlich sind, um Verzögerungen zu vermeiden, oder nur so schnell wie möglich eine diskrete visuelle Änderung in der Benutzeroberfläche erzeugen – zu verstehen, wie die Pixelpipeline des Browsers funktioniert, ist für Ihre Arbeit von entscheidender Bedeutung.

Pixelpipeline

Es gibt fünf Hauptbereiche, die Sie bei Ihrer Arbeit als Webentwickler kennen und die Sie berücksichtigen müssen. Diese fünf Bereiche sind die Bereiche, über die Sie die meiste Kontrolle haben. Jeder Bereich stellt einen wichtigen Punkt in der Pipeline von Pixel zu Bildschirm dar:

Die vollständige Pixelpipeline, dargestellt.

• JavaScript:JavaScript wird normalerweise für Vorgänge verwendet, die visuelle Änderungen an der Benutzeroberfläche zur Folge haben. Dies könnte beispielsweise die Funktion animate von jQuery sein, ein Dataset sortieren oder der Seite DOM-Elemente hinzufügen. JavaScript ist jedoch nicht unbedingt erforderlich, um visuelle Änderungen auszulösen: CSS-Animationen, CSS-Übergänge und die Web Animations API können Seiteninhalte animieren.
• Stilberechnungen:Bei dieser Methode wird anhand übereinstimmender Selektoren ermittelt, welche CSS-Regeln für welche HTML-Elemente gelten. .headline ist beispielsweise ein Beispiel für einen CSS-Selektor, der auf jedes HTML-Element mit einem class-Attributwert angewendet wird, das die Klasse headline enthält. Sobald die Regeln bekannt sind, werden sie angewendet und die endgültigen Stile für jedes Element werden berechnet.
• Layout:Wenn der Browser weiß, welche Regeln für ein Element gelten, kann er mit der Berechnung der Geometrie der Seite beginnen. So kann er beispielsweise berechnen, wie viel Platz die Elemente einnehmen und wo sie auf dem Bildschirm angezeigt werden. Das Layoutmodell des Webs bedeutet, dass ein Element andere beeinflussen kann. Beispielsweise wirkt sich die Breite des <body>-Elements in der Regel auf die Abmessungen der untergeordneten Elemente in der Baumstruktur aus, sodass der Vorgang für den Browser recht aufwendig sein kann.
• Malen:Beim Malen werden Pixel ausgefüllt. Dabei werden nach der Berechnung des Seitenlayouts Text, Farben, Bilder, Rahmen, Schatten und im Wesentlichen jeder visuelle Aspekt der Elemente gezeichnet. Die Zeichnung wird in der Regel auf mehreren Oberflächen ausgeführt, die häufig als Layers bezeichnet werden.
• Zusammengesetzt:Da die Teile der Seite möglicherweise auf mehreren Ebenen gezeichnet wurden, müssen sie in der richtigen Reihenfolge auf den Bildschirm angewendet werden, damit die Seite wie erwartet gerendert wird. Das ist besonders wichtig bei Elementen, die sich mit anderen überschneiden, da ein Fehler dazu führen kann, dass ein Element falsch über einem anderen angezeigt wird.

Jeder dieser Teile der Pixelpipeline stellt eine Möglichkeit dar, eine Verzögerung bei Animationen einzuführen oder die Darstellung von Frames zu verzögern, selbst bei einzelnen visuellen Änderungen an der Benutzeroberfläche. Daher ist es wichtig, genau zu verstehen, welche Teile der Pipeline Ihr Code auslösen, und zu untersuchen, ob Sie Ihre Änderungen auf die Teile der Pixelpipeline beschränken können, die zum Rendern erforderlich sind.

Vielleicht haben Sie den Begriff „Rastern“ im Zusammenhang mit „Farben“ verwendet. Das liegt daran, dass das Streichen eigentlich zwei Aufgaben ist:

1. Erstellen einer Liste von Zeichenaufrufen
2. die Füllung der Pixel.

Letzteres wird als „Rasterisierung“ bezeichnet. Wenn Sie also Paint-Datensätze in den Entwicklertools sehen, sollten Sie sie als Rasterung betrachten. In einigen Architekturen erfolgt das Erstellen der Liste der Zeichenaufrufe und der Rasterung in verschiedenen Threads. Dies können Sie als Entwickler jedoch nicht steuern.

Sie müssen nicht immer jeden Teil der Pipeline in jedem Frame bearbeiten. Tatsächlich gibt es drei Möglichkeiten, wie die Pipeline normalerweise für einen bestimmten Frame abläuft, wenn Sie eine visuelle Änderung vornehmen, entweder mit JavaScript, CSS oder der Web Animations API.

1. JS / CSS > Stil > Layout > Paint > Verbunden

Wenn Sie eine Layout-Eigenschaft ändern, z. B. eine, die die Geometrie eines Elements ändert, z. B. die Breite, Höhe oder seine Position (z. B. die CSS-Eigenschaften left oder top), muss der Browser alle anderen Elemente prüfen und die Seite neu umformatieren. Alle betroffenen Bereiche müssen neu gestrichen und die endgültigen Elemente müssen wieder zusammengesetzt werden.

2. JS / CSS > Stil > Paint > Verbunden

Wenn Sie in CSS eine Eigenschaft für ein Element geändert haben, z. B. background-image, color oder box-shadow, ist der Layoutschritt nicht erforderlich, um eine visuelle Aktualisierung der Seite durchzuführen. Durch Auslassen des Layoutschritts – wenn möglich – vermeiden Sie potenziell kostspielige Layoutarbeiten, die sonst zu einer erheblichen Latenz beim Erzeugen des nächsten Frames führen könnten.

3. JS / CSS > Stil > Verbunden

Wenn Sie eine Eigenschaft ändern, für die weder Layout oder Paint erforderlich ist, kann der Browser direkt zum Compositing-Schritt springen. Dies ist der kostengünstigste und günstigste Weg durch die Pixelpipeline für Stellen mit hohem Druck im Lebenszyklus einer Seite, z. B. Animationen oder Scrollen. Fun Fakt: Chromium optimiert das Scrollen der Seite so, dass es möglichst ausschließlich im Compositor-Thread erfolgt. Das bedeutet, dass du auch dann weiterhin auf der Seite scrollen kannst, um Teile davon zu sehen, die zuvor auf den Bildschirm gezogen wurden.

Hinweis:Wenn Sie möchten, dass Animationen mit hoher Leistung schneller laufen, lesen Sie den Artikel Auf Compositor-Eigenschaften beibehalten und Ebenenanzahl verwalten.

Bei der Webleistung geht es darum, Arbeit zu vermeiden und gleichzeitig die Effizienz notwendiger Arbeiten so weit wie möglich zu steigern. Meistens geht es darum, mit dem Browser zu arbeiten, nicht gegen ihn. Die zuvor in der Pipeline gezeigte Arbeit unterscheidet sich in Bezug auf die Berechnungskosten. Einige Aufgaben sind grundsätzlich kostspieliger als andere.

Werfen wir nun einen Blick auf die verschiedenen Teile der Pipeline. Wir sehen uns die häufigsten Probleme sowie deren Diagnose und Behebung an.

Browser-Rendering-Optimierungen

Leistung ist für Nutzer wichtig. Für eine gute Nutzererfahrung müssen Webentwickler Websites erstellen, die schnell auf Nutzerinteraktionen reagieren und reibungslos gerendert werden können. Der Leistungsexperte Paul Lewis unterstützt Sie dabei, Verzögerungen zu beseitigen und Webanwendungen zu erstellen, die eine Leistung von 60 Bildern pro Sekunde erzielen. Sie verlassen diesen Kurs mit den Tools, die Sie benötigen, um Profile für Anwendungen zu erstellen und die Ursachen für suboptimale Rendering-Leistung zu identifizieren. Außerdem lernen Sie die Renderingpipeline des Browsers kennen und entdecken Muster, mit denen sich schnelle Websites erstellen lassen, die Nutzer gern verwenden.

Dieser kostenlose Kurs wird über Udacity angeboten und du kannst jederzeit daran teilnehmen.