Weniger Lackierung und weniger Lackbereiche

Paul Lewis

Beim Malen werden Pixel gefüllt, die schließlich auf dem Bildschirm des Nutzers zusammengesetzt werden. Es ist oft die am längsten laufende aller Aufgaben in der Pipeline. und eine, die Sie nach Möglichkeit vermeiden sollten.

Zusammenfassung

• Das Ändern einer anderen Eigenschaft als „Transform“ oder „Opacity“ löst immer eine Neuzeichnung aus.
• Paint ist oft der teuerste Teil der Pixelpipeline. Vermeiden Sie es nach Möglichkeit.
• Reduzieren Sie Farbbereiche durch das Bewerben von Ebenen und die Orchestrierung von Animationen.
• Paint-Profiler in Chrome-Entwicklertools verwenden, um Paint-Komplexität und -Kosten zu bewerten zu reduzieren, wo es möglich ist.

So werden Layout und Paint ausgelöst

Wenn Sie das Layout auslösen, wird immer auch die Paint-Funktion ausgelöst, da die Pixel eines Elements angepasst werden müssen, wenn sich die Geometrie eines Elements ändert.

Sie können die Malfunktion auch auslösen, wenn Sie nicht geometrische Eigenschaften ändern, z. B. Hintergründe, Textfarbe oder Schatten. In diesen Fällen ist kein Layout erforderlich und die Pipeline sieht so aus:

Mit den Chrome-Entwicklertools schnell Farbengpässe identifizieren

Mit den Chrome DevTools können Sie schnell Bereiche identifizieren, die gerendert werden. Öffnen Sie den Tab „Rendering“ und aktivieren Sie Paint Flashing.

Wenn diese Option aktiviert ist, blinkt der Bildschirm in Chrome jedes Mal grün. Wenn der gesamte Bildschirm grün blinkt oder Bereiche des Bildschirms, die Ihrer Meinung nach nicht gemalt werden sollten, sollten Sie genauer hinschauen.

Elemente bewerben, die sich bewegen oder verblassen

Es wird nicht immer ein einzelnes Bild im Speicher gemalt. Der Browser kann bei Bedarf sogar mehrere Bilder oder Kompositionsebenen bearbeiten.

Der Vorteil dieses Ansatzes besteht darin, dass Elemente, die regelmäßig neu gerendert oder mithilfe von Transformationen auf dem Bildschirm bewegt werden, verarbeitet werden können, ohne andere Elemente zu beeinflussen. Dies ist dasselbe wie bei Kunstpaketen wie Sketch, GIMP oder Photoshop, bei denen einzelne Ebenen bearbeitet und übereinander zusammengesetzt werden können, um das endgültige Bild zu erstellen.

Am besten erstellen Sie eine neue Ebene mit der CSS-Eigenschaft will-change, die in allen gängigen Browser-Engines verfügbar ist. Mit dem Wert transform erstellt will-change eine neue Compositor-Ebene:

.moving-element {
  will-change: transform;
}

Es ist jedoch darauf zu achten, nicht zu viele Ebenen zu erstellen, da jede Ebene sowohl Arbeitsspeicher als auch Verwaltung erfordert. Weitere Informationen finden Sie im Abschnitt Nur für den Compositor bestimmte Eigenschaften verwenden und die Anzahl der Ebenen verwalten.

Wenn du ein Element auf eine neue Ebene hochgestuft hast, kannst du mit den Entwicklertools überprüfen, ob sich dadurch die Leistung verbessert hat. Steigern Sie keine Elemente ohne Profilerstellung.

Farbbereiche reduzieren

Manchmal sind jedoch trotz der Vorkehrungen Lackierarbeiten erforderlich. Eine große Herausforderung bei Malproblemen besteht darin, dass Browser zwei Bereiche zusammenführen, die gemalt werden müssen. Dies kann dazu führen, dass der gesamte Bildschirm neu gemalt wird. Wenn Sie beispielsweise eine feste Kopfzeile oben auf der Seite und etwas unten auf dem Bildschirm haben, kann der gesamte Bildschirm neu gezeichnet werden.

Hinweis: Auf Bildschirmen mit hoher Auflösung werden Elemente mit fester Position automatisch in eine eigene Compositor-Ebene verschoben. Auf Geräten mit niedrigen DPI-Werten ist dies nicht der Fall, da die Werbung das Textrendering von Subpixeln in Graustufen ändert und die Ebenenwerbung manuell vorgenommen werden muss.

Bei der Reduzierung von Farbbereichen werden Ihre Animationen und Übergänge häufig so organisiert, dass sie sich nicht so stark überschneiden, oder Sie müssen Möglichkeiten finden, bestimmte Teile der Seite nicht zu animieren.

Vereinfachte Malerei

Wenn es um Malerei geht, sind manche Dinge teurer als andere. Alles, was eine Unschärfe erfordert (z. B. ein Schatten), dauert länger als das Zeichnen eines roten Felds. In Bezug auf Preisvergleichsportale ist dies jedoch nicht immer offensichtlich: background: red; und box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); scheinen nicht unbedingt stark unterschiedliche Leistungsmerkmale zu haben, aber sie haben es schon.

Wie im vorherigen Screenshot zu sehen, können Sie mit dem Farbprofil ermitteln, ob Sie andere Möglichkeiten zur Erzeugung von Effekten in Betracht ziehen müssen. Fragen Sie sich, ob Sie ein günstigeres Design oder alternative Mittel verwenden können, um das gewünschte Endergebnis zu erzielen.

Vor allem auf Mobilgeräten sollten Sie Paint immer bei Animationen vermeiden, da die verfügbaren 10 ms pro Frame normalerweise nicht lang genug sind, um Paint-Arbeiten durchzuführen.