Nutzer bemerken, wenn Websites und Apps nicht gut funktionieren. Daher ist es wichtig, die Rendering-Leistung zu optimieren.
Nutzer des heutigen Webs erwarten, dass die von ihnen besuchten Seiten interaktiv und flüssig sind. Darauf sollten Sie zunehmend Zeit und Mühe verwenden. Seiten sollten nicht nur schnell geladen werden, sondern auch während ihres gesamten Lebenszyklus schnell auf Nutzereingaben reagieren. Tatsächlich ist dieser Aspekt der Nutzererfahrung genau das, was der Messwert Interaction to Next Paint (INP) misst. Ein guter INP bedeutet, dass eine Seite konsistent und zuverlässig auf die Anforderungen des Nutzers reagiert hat.
Ein wichtiger Faktor für die Reaktionsfähigkeit einer Seite ist die Menge an JavaScript, die 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 oft zusammenfassend als Rendering bezeichnet werden. Diese Arbeit muss so schnell wie möglich erfolgen, damit die Nutzererfahrung schnell und zuverlässig ist.
Wenn Sie Seiten schreiben möchten, die schnell auf Nutzerinteraktionen reagieren, müssen Sie verstehen, wie HTML, JavaScript und CSS vom Browser verarbeitet werden. Außerdem müssen Sie dafür sorgen, dass der von Ihnen geschriebene Code sowie alle anderen von Ihnen eingebundenen Drittanbietercodes so effizient wie möglich ausgeführt werden.
Hinweis zu Aktualisierungsraten von Geräten
Die meisten Geräte aktualisieren ihre Bildschirme heute 60-mal pro Sekunde. Bei jeder Aktualisierung wird die visuelle Ausgabe erzeugt, die Sie sehen. Diese wird im Allgemeinen als Frame bezeichnet. Im folgenden Video wird das Konzept von Frames demonstriert:
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 möglicherweise nicht immer genügend Frames erzeugen, um diese Aktualisierungsrate zu erreichen. Wenn beispielsweise eine Animation oder ein Übergang ausgeführt wird, muss der Browser die Aktualisierungsrate des Geräts einhalten, um für jede Aktualisierung des Bildschirms einen Frame zu erzeugen.
Da ein typisches Display 60 Mal pro Sekunde aktualisiert wird, hat der Browser 16,66 Millisekunden Zeit, um jeden Frame zu erzeugen. 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 die Seiteninhalte ruckeln auf dem Bildschirm. Dieses Phänomen wird oft als Ruckeln bezeichnet.
Ihre Ziele ändern sich jedoch je nach Art der Arbeit, die Sie ausführen möchten. Das Erreichen des Schwellenwerts 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 an der Benutzeroberfläche, also beim Übergang von einem Zustand in einen anderen ohne Bewegung dazwischen, wird empfohlen, diese Änderungen in einem Zeitrahmen vorzunehmen, der sich für den Nutzer sofort anfühlt. In solchen Fällen werden oft 100 Millisekunden genannt. Der Grenzwert für einen „guten“ INP-Wert liegt jedoch bei 200 Millisekunden oder weniger, um eine größere Bandbreite an Geräten mit unterschiedlichen Funktionen zu berücksichtigen.
Unabhängig von Ihren Zielen – ob Sie die vielen Frames erstellen, die für Animationen erforderlich sind, um Ruckeln zu vermeiden, oder einfach nur so schnell wie möglich eine diskrete visuelle Änderung in der Benutzeroberfläche vornehmen möchten – ist es für Ihre Arbeit unerlässlich, zu verstehen, wie die Pixel-Pipeline des Browsers funktioniert.
Die Pixel-Pipeline
Es gibt fünf wichtige Bereiche, die Sie bei Ihrer Arbeit als Webentwickler kennen und beachten müssen. Diese fünf Bereiche sind diejenigen, über die Sie die meiste Kontrolle haben. Jeder Bereich 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 Funktion
animatevon jQuery, das Sortieren eines Datasets 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 Seiteninhalte animieren. - Stilberechnungen: Hierbei wird anhand übereinstimmender Selektoren ermittelt, welche CSS-Regeln für welche HTML-Elemente gelten.
.headlineist beispielsweise ein 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 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 seiner untergeordneten Elemente im gesamten Baum aus. Der Prozess kann also für den Browser recht komplex sein. - Zeichnen: Beim Zeichnen werden Pixel ausgefü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 wird in der Regel auf mehreren Oberflächen erstellt, die oft als Ebenen bezeichnet werden.
- Zusammensetzen: Da die Teile der Seite möglicherweise auf mehrere Ebenen gezeichnet wurden, müssen sie in der richtigen Reihenfolge auf dem Bildschirm angezeigt werden, damit die Seite wie erwartet gerendert wird. Dies ist besonders wichtig für Elemente, die sich überlappen, da ein Fehler dazu führen könnte, dass ein Element fälschlicherweise über einem anderen angezeigt wird.
Jeder dieser Teile der Pixel-Pipeline bietet die Möglichkeit, Ruckeln in Animationen einzuführen 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 Pixel-Pipeline beschränken können, die für das Rendering erforderlich sind.
Vielleicht haben Sie den Begriff „rastern“ schon einmal im Zusammenhang mit „zeichnen“ gehört. Das liegt daran, dass das Streichen eigentlich aus zwei Aufgaben besteht:
- Erstellen einer Liste von Zeichenbefehlen.
- Pixel werden ausgefüllt.
Letzteres wird als „Rasterung“ bezeichnet. Wenn Sie also in den Entwicklertools Paint-Einträge sehen, sollten Sie davon ausgehen, dass sie auch die Rasterung umfassen. In einigen Architekturen werden das Erstellen der Liste der Zeichenbefehle und die Rasterung in verschiedenen Threads ausgeführt. Als Entwickler hast du darauf jedoch keinen Einfluss.
Sie werden nicht unbedingt bei jedem Frame jeden Teil der Pipeline berühren. 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 > Composite
Wenn Sie eine „Layout“-Eigenschaft ä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 anordnen. Alle betroffenen Bereiche müssen neu gezeichnet und die endgültigen gezeichneten Elemente wieder zusammengesetzt werden.
2. JS / CSS > Stil > Paint > Composite
Wenn Sie eine reine Paint-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 potenziell kostspielige Layoutarbeiten, die sonst zu erheblichen Latenzen bei der Erstellung des nächsten Frames führen könnten.
3. JS/CSS > Stil > Zusammengesetzt
Wenn Sie eine Eigenschaft ändern, die weder Layout noch Paint erfordert, kann der Browser direkt zum Compositing-Schritt springen. Dies ist der günstigste und wünschenswerteste Pfad durch die Pixel-Pipeline für hohe Belastungspunkte im Lebenszyklus einer Seite, z. B. Animationen oder Scrollen. Fun Fact: Chromium optimiert das Scrollen der Seite, sodass es nach Möglichkeit nur im Compositor-Thread erfolgt. Das bedeutet, dass Sie auch dann, wenn eine Seite nicht reagiert, auf der Seite scrollen und Teile davon sehen können, die zuvor auf dem Bildschirm dargestellt wurden.
Webleistung ist die Kunst, Arbeit zu vermeiden und gleichzeitig die Effizienz aller erforderlichen Arbeiten so weit wie möglich zu steigern. In vielen Fällen geht es darum, mit dem Browser zu arbeiten, nicht gegen ihn. Beachten Sie, dass sich die zuvor in der Pipeline gezeigten Aufgaben hinsichtlich der Rechenkosten unterscheiden. Einige Aufgaben sind von Natur aus teurer als andere.
Sehen wir uns die verschiedenen Teile der Pipeline genauer an. Wir sehen uns häufige Probleme an und wie sie diagnostiziert und behoben werden können.
Optimierungen des Browser-Renderings
Die Leistung ist für Nutzer wichtig. Um eine gute Nutzererfahrung zu bieten, müssen Webentwickler Websites erstellen, die schnell auf Nutzerinteraktionen reagieren und reibungslos gerendert werden. Der Leistungsexperte Paul Lewis hilft Ihnen, Ruckeln zu vermeiden und Web-Apps zu erstellen, die eine Leistung von 60 Bildern pro Sekunde aufrechterhalten. Nach Abschluss dieses Kurses verfügen Sie über die Tools, die Sie benötigen, um Apps zu profilieren und die Ursachen für eine suboptimale Renderingleistung zu ermitteln. Außerdem lernen Sie die Rendering-Pipeline des Browsers kennen und entdecken Muster, mit denen Sie leichter schnelle Websites erstellen können, die Nutzer gerne verwenden.
Dieser Kurs wird kostenlos über Udacity angeboten und kann jederzeit belegt werden.