Nutzer bemerken, wenn Websites und Apps nicht richtig funktionieren. Daher ist die Optimierung der Renderingleistung entscheidend.
Nutzer des heutigen Webs erwarten, dass die von ihnen besuchten Seiten interaktiv und flüssig sind. Darauf müssen Sie immer mehr Zeit und Mühe verwenden. Seiten sollten nicht nur schnell geladen werden, sondern auch während des gesamten Lebenszyklus schnell auf Nutzereingaben reagieren. Genau diesen Aspekt der Nutzerfreundlichkeit misst der Messwert Interaction to Next Paint (INP). Ein guter INP bedeutet, dass eine Seite durchgehend und zuverlässig auf die Anforderungen der Nutzer reagiert hat.
Ein wichtiger Faktor für die Geschwindigkeit einer Seite ist die Menge an JavaScript, die Sie als Reaktion auf Nutzerinteraktionen ausführen. Nutzer erwarten jedoch visuelle Änderungen an der Benutzeroberfläche. Visuelle Änderungen an einer Benutzeroberfläche sind das Ergebnis verschiedener Arten von Arbeit, die oft als Rendering bezeichnet werden. Diese Arbeit muss so schnell wie möglich erfolgen, damit die Nutzererfahrung schnell und zuverlässig ist.
Wenn Sie Seiten erstellen möchten, 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 der von Ihnen geschriebene Code sowie jeglicher Code von Drittanbietern so effizient wie möglich ausgeführt wird.
Hinweis zu Geräteaktualisierungsraten
Die meisten Geräte aktualisieren ihre Bildschirme heute 60 Mal pro Sekunde. Jede Aktualisierung erzeugt die visuelle Ausgabe, die Sie sehen, und wird allgemein als Frame bezeichnet. Im folgenden Video wird das Konzept von Frames veranschaulicht:
Das Display eines Geräts wird zwar immer mit einer konstanten Rate aktualisiert, aber Anwendungen, die auf einem Gerät ausgeführt werden, können nicht immer genügend Frames generieren, um diese Bildwiederholrate zu erreichen. Wenn beispielsweise eine Animation oder ein Übergang ausgeführt wird, muss der Browser die Bildwiederholrate des Geräts anpassen, um bei jedem Aktualisieren des Bildschirms einen Frame zu generieren.
Da ein typisches Display 60 Mal pro Sekunde aktualisiert wird, hat der Browser 16,66 Millisekunden Zeit, um jeden Frame zu generieren. In der Realität hat der Browser jedoch für jeden Frame einen eigenen Overhead, sodass alle Arbeiten innerhalb von 10 Millisekunden abgeschlossen werden müssen. Wenn Sie dieses Budget nicht einhalten, sinkt die Framerate und der Seiteninhalt ruckelt auf dem Bildschirm. Dieses Phänomen wird oft als Jank bezeichnet.
Die Zielwerte ändern sich jedoch je nach Art der Arbeit, die Sie ausführen möchten. Die Einhaltung des Grenzwerts von 10 Millisekunden ist für Animationen entscheidend, bei denen die Objekte auf dem Bildschirm über eine Reihe von Frames zwischen zwei Punkten interpoliert werden. Bei diskreten Änderungen an der Benutzeroberfläche, d. h. beim Wechsel von einem Status zu einem anderen ohne Bewegung dazwischen, sollten Sie diese Änderungen in einem Zeitrahmen vornehmen, der für den Nutzer sofort wirkt. In solchen Fällen wird oft der Wert 100 Millisekunden genannt. Der Grenzwert für „gut“ beim Messwert „INP“ liegt jedoch bei 200 Millisekunden oder darunter, um eine größere Bandbreite von Geräten mit unterschiedlichen Funktionen zu berücksichtigen.
Unabhängig von Ihren Zielen – ob Sie die vielen Frames für Animationen erstellen, um Ruckler zu vermeiden, oder einfach nur eine diskrete visuelle Änderung in der Benutzeroberfläche so schnell wie möglich vornehmen möchten –, ist es für Ihre Arbeit unerlässlich, zu verstehen, wie die Pixelpipeline des Browsers funktioniert.
Pixel-Pipeline
Es gibt fünf Hauptbereiche, die Sie als Webentwickler kennen und beachten sollten. Auf diese fünf Bereiche haben Sie die meiste Kontrolle. Jeder von ihnen stellt einen wichtigen Punkt in der Pixel-zu-Bildschirm-Pipeline dar:
- JavaScript:JavaScript wird in der Regel für Aufgaben verwendet, die zu visuellen Änderungen an der Benutzeroberfläche führen. Das kann beispielsweise die
animate-Funktion von jQuery, das Sortieren eines Datensatzes oder das Hinzufügen von DOM-Elementen zur Seite sein. JavaScript ist jedoch nicht unbedingt erforderlich, um visuelle Änderungen auszulösen: CSS-Animationen, CSS-Übergänge und die Web Animations API können den Seiteninhalt animieren. - Stilberechnungen: Dabei wird anhand übereinstimmender Selektoren ermittelt, welche CSS-Regeln auf welche HTML-Elemente angewendet werden.
.headlineist beispielsweise ein Beispiel für einen CSS-Selektor, der auf jedes HTML-Element mit einemclass-Attributwert angewendet wird, der eine Klasse vonheadlineenthält. Sobald die Regeln bekannt sind, werden sie angewendet und die endgültigen Stile für jedes Element berechnet. - Layout: Sobald der Browser weiß, welche Regeln für ein Element gelten, kann er mit der Berechnung der Geometrie der Seite beginnen, z. B. wie viel Platz Elemente einnehmen und wo sie auf dem Bildschirm erscheinen. Das Layoutmodell des Webs bedeutet, dass sich ein Element auf andere auswirken kann. Beispielsweise wirkt sich die Breite des Elements
<body>in der Regel auf die Abmessungen seiner untergeordneten Elemente im gesamten Baum aus. Daher kann der Prozess für den Browser recht aufwendig sein. - Paint (Malen): Beim Malen werden Pixel gefüllt. Dabei werden Text, Farben, Bilder, Rahmen, Schatten und im Grunde alle visuellen Aspekte der Elemente gezeichnet, nachdem ihr Layout auf der Seite berechnet wurde. Die Zeichnung erfolgt in der Regel auf mehreren Oberflächen, die oft als Ebenen bezeichnet werden.
- Komposit: Da die Seitenteile möglicherweise auf mehrere 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 für Elemente, die sich überschneiden, da ein Fehler dazu führen kann, dass ein Element fälschlicherweise über einem anderen erscheint.
Jeder dieser Teile der Pixelpipeline bietet die Möglichkeit, Ruckler in Animationen zu verursachen oder das Zeichnen von Frames auch bei diskreten visuellen Änderungen an der Benutzeroberfläche zu verzögern. Daher ist es wichtig, genau zu wissen, welche Teile der Pipeline durch Ihren Code ausgelöst werden, und zu prüfen, ob Sie Ihre Änderungen auf die Teile der Pixelpipeline beschränken können, die zum Rendern erforderlich sind.
Möglicherweise haben Sie den Begriff „Rasterisieren“ in Verbindung mit „Malen“ gehört. Das liegt daran, dass das Malen eigentlich zwei Aufgaben umfasst:
- Erstellen einer Liste von Draw-Aufrufen
- Pixel werden ausgefüllt.
Letzteres wird als „Rasterung“ bezeichnet. Wenn Sie also in den DevTools Paint-Einträgne sehen, sollten Sie davon ausgehen, dass sie die Rasterung umfassen. Bei einigen Architekturen werden die Liste der Draw-Aufrufe und die Rasterisierung in verschiedenen Threads erstellt. Das können Sie als Entwickler jedoch nicht beeinflussen.
Sie müssen nicht unbedingt jeden Teil der Pipeline in jedem Frame bearbeiten. Wenn Sie eine visuelle Änderung vornehmen, wird die Pipeline normalerweise auf drei Arten für einen bestimmten Frame ausgeführt: entweder mit JavaScript, CSS oder der Web Animations API.
1. JS / CSS > Stil > Layout > Paint > Composite
Wenn Sie eine Layouteigenschaft ändern, z. B. eine, die die Geometrie eines Elements wie Breite, Höhe oder Position ändert (z. B. die CSS-Eigenschaften left oder top), muss der Browser alle anderen Elemente prüfen und die Seite neu formatieren. Alle betroffenen Bereiche müssen neu gestrichen und die endgültigen gemalten Elemente wieder zusammengesetzt werden.
2. JS / CSS > Stil > Malen > Zusammensetzung
Wenn Sie eine „nur-Zeichnen“-Eigenschaft für ein Element in CSS geändert haben, z. B. Eigenschaften wie background-image, color oder box-shadow, ist der Layoutschritt nicht erforderlich, um eine visuelle Aktualisierung der Seite vorzunehmen. Wenn Sie den Layoutschritt nach Möglichkeit weglassen, vermeiden Sie möglicherweise kostspielige Layoutarbeiten, die sonst zu einer erheblichen Verzögerung bei der Erstellung des nächsten Frames geführt hätten.
3. JS / CSS > Stil > Zusammengesetzt
Wenn Sie eine Eigenschaft ändern, für die weder Layout noch Paint erforderlich sind, kann der Browser direkt zum Schritt „Compositing“ springen. Dies ist der günstigste und wünschenswerteste Pfad durch die Pixelpipeline für Hochlastpunkte im Lebenszyklus einer Seite, z. B. Animationen oder Scrollen. Wissenswertes: Chromium optimiert das Scrollen der Seite so, dass es nach Möglichkeit nur im Compositor-Thread erfolgt. Das bedeutet, dass Sie auch dann, wenn eine Seite nicht reagiert, die Seite scrollen und Teile davon sehen können, die zuvor auf dem Bildschirm dargestellt wurden.
Die Webleistung besteht darin, Arbeit zu vermeiden und gleichzeitig die Effizienz aller erforderlichen Arbeit so weit wie möglich zu steigern. In vielen Fällen geht es darum, mit dem Browser zu arbeiten und nicht gegen ihn. Die in der Pipeline zuvor angezeigte Arbeit unterscheidet sich hinsichtlich der Rechenkosten. Einige Aufgaben sind von Natur aus teurer als andere.
Sehen wir uns die einzelnen Teile der Pipeline genauer an. Wir sehen uns die häufigsten Probleme an und erfahren, wie sie diagnostiziert und behoben werden.
Browser-Rendering-Optimierungen
Die Leistung ist für Nutzer wichtig. Um eine gute Nutzererfahrung zu schaffen, müssen Webentwickler Websites erstellen, die schnell auf Nutzerinteraktionen reagieren und reibungslos gerendert werden. Der Leistungsexperte Paul Lewis zeigt Ihnen, wie Sie Ruckler beseitigen und Web-Apps erstellen, die eine Leistung von 60 Frames pro Sekunde aufrechterhalten. Am Ende dieses Kurses haben Sie die Tools, die Sie zum Erstellen von App-Profilen und zum Identifizieren der Ursachen für eine suboptimale Renderingleistung benötigen. Außerdem lernen Sie die Rendering-Pipeline des Browsers kennen und entdecken Muster, mit denen sich schnellere Websites erstellen lassen, die Nutzer begeistern.
Dieser kostenlose Kurs wird über Udacity angeboten und kann jederzeit besucht werden.