Web-Performance meistern: Die Pixel-Pipeline verstehen

Als Webentwickler und insbesondere für diejenigen von uns, die sich auf Frontend-Entwicklung spezialisiert haben, ist es wichtig zu verstehen, wie Browser funktionieren, das Kommunikationsprotokoll im Web, die Barrierefreiheit im Web und mehr.

In diesem Fall teile ich Ihnen mit, was Sie beachten sollten, um die Leistung unserer Websites und damit das Benutzererlebnis zu verbessern. Hier geht es um die Pixel Pipeline.

Was ist die Pixel-Pipeline?

Die Pixel-Pipeline ist ein Prozess, der beschreibt, wie Webbrowser HTML, CSS und JavaScript in visuelle Elemente umwandeln, die auf dem Bildschirm angezeigt werden

Es gibt fünf Hauptbereiche, die Sie kennen und bei Ihrer Arbeit als Webentwickler berücksichtigen sollten. Diese fünf Bereiche sind das, was Sie haben, und jeder stellt einen Schlüsselpunkt in der Pixelpipeline zum Bildschirm dar:

JavaScript: JavaScript wird normalerweise zur Bearbeitung von Arbeiten verwendet, die zu visuellen Änderungen an der Benutzeroberfläche führen. Dies könnte beispielsweise die Animationsfunktion von jQuery, das Sortieren eines Datensatzes oder das Hinzufügen von DOM-Elementen zur Seite sein

Stilberechnungen: Hierbei handelt es sich um den Prozess, anhand passender Selektoren herauszufinden, welche CSS-Regeln für welche HTML-Elemente gelten. Beispielsweise ist .headline ein Beispiel für einen CSS-Selektor, der auf jedes HTML-Element mit einem Klassenattributwert angewendet wird, der eine Klasse von Überschriften enthält.

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.

Malen: Beim Malen werden Pixel ausgefüllt. Dabei geht es darum, Text, Farben, Bilder, Ränder, Schatten und im Wesentlichen jeden visuellen Aspekt der Elemente zu zeichnen, nachdem ihr Layout auf der Seite berechnet wurde.

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.

Wenn wir also das oben Gesagte kennen, können wir die Ressourcenkosten für Animationen verstehen, bei denen wir die Größe eines Elements ändern, was die Rückkehr zum Layoutprozess, dann zum Malprozess und schließlich zum Kompositionsprozess erfordert.

Andererseits müssen Sie zum Erstellen von Animationen, bei denen die Textfarbe oder die Hintergrundfarbe eines Elements geändert wird, nur den Paint-Prozess und dann den Compose-Prozess aufrufen.

Empfehlungen zur Verbesserung der Leistung Ihrer Website und der Benutzererfahrung

i) Versuchen Sie nach Möglichkeit zu vermeiden, zu viele Animationen zu erstellen.
ii) Wenn Sie Animationen wünschen, beschränken Sie sich beim Animieren auf die Transformations- und Deckkrafteigenschaften, da diese Eigenschaften nur den Compose-Prozess durchlaufen müssen, der der letzte Schritt der Pixel-Pipeline ist. Beispiel: Wenn Sie eine Schaltfläche mit der Hover-Pseudoklasse animieren, ist es besser, die Deckkraft zu verwenden, anstatt die Hintergrundfarbe zu ändern.
iii) Wenn wir ein Element als Teil einer Animation verschieben möchten, ist es besser, „will-change“ oder die Eigenschaft „transform“ mit ihren Übersetzungswerten zu verwenden.

Quellen, auf denen dieser Beitrag basiert:
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

Kostenloser Kurs zur Browser-Rendering-Optimierung, gehalten von Paul Lewis, einem erfahrenen Ingenieur in allen Fragen der Leistung und Erfinder von Lighthouse (Google Lighthouse ist ein automatisiertes Open-Source-Tool zur Messung der Qualität von Webseiten), einem Tool innerhalb von die Chrome DevTools:
https://www.udacity.com/course/browser-rendering-optimization--ud860

Das obige ist der detaillierte Inhalt vonWeb-Performance meistern: Die Pixel-Pipeline verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!