Paint ist der Prozess des Ausfüllens von Pixeln, die schließlich auf den Bildschirmen der Nutzenden zusammengesetzt werden. Dies ist häufig die Aufgabe mit der längsten Ausführungszeit in der Pipeline und sollte möglichst vermieden werden.
Paint ist der Prozess, bei dem Pixel ausgefüllt werden, die sich schließlich auf den Bildschirmen der Nutzer zusammensetzen. Dies ist häufig die Aufgabe mit der längsten Ausführungszeit in der Pipeline und sollte möglichst vermieden werden.
Zusammenfassung
- Wird neben Transformationen oder der Deckkraft eine beliebige Eigenschaft geändert, wird immer das Painting ausgelöst.
- Paint ist oft der teuerste Teil der Pixelpipeline. Vermeiden Sie ihn, wo es möglich ist.
- Reduzieren Sie die Farbbereiche durch Ebenenförderung und Orchestrierung von Animationen.
- Verwenden Sie den Paint-Profiler in den Chrome-Entwicklertools, um die Komplexität und die Kosten des Painters zu beurteilen und gegebenenfalls zu reduzieren.
Layout und Paint auslösen
Wenn Sie das Layout auslösen, lösen Sie immer Paint aus, da das Ändern der Geometrie eines Elements dazu führt, dass die Pixel korrigiert werden müssen.
Sie können die Farbe auch auslösen, wenn Sie nicht geometrische Eigenschaften wie Hintergründe, Textfarbe oder Schatten ändern. In diesen Fällen ist kein Layout erforderlich und die Pipeline sieht so aus:
Farbengpässe mit den Chrome-Entwicklertools schnell erkennen
Mit den Chrome-Entwicklertools können Sie schnell Bereiche identifizieren, die gezeichnet werden. Öffnen Sie den Tab „Rendering“ und aktivieren Sie Paint-Blitz.
Wenn diese Option aktiviert ist, blinkt der Bildschirm bei jedem Malen grün. Wenn Sie sehen, dass der gesamte Bildschirm grün blinkt oder Bereiche des Bildschirms, die Ihrer Meinung nach nicht gestrichen werden sollten, dann sollten Sie etwas weiter nachschauen.
Elemente hervorheben, die sich bewegen oder ausblenden
Nicht immer wird aus dem Gedächtnis ein einzelnes Bild abgeleitet. Tatsächlich ist es möglich, dass der Browser bei Bedarf mehrere Bilder oder Compositor-Ebenen erstellt.
Der Vorteil dieses Ansatzes besteht darin, dass Elemente, die regelmäßig neu gezeichnet werden oder sich mit Transformationen auf dem Bildschirm bewegen, ohne Auswirkung auf andere Elemente verarbeitet werden können. Das Gleiche gilt wie bei Artpaketen wie Sketch, GIMP oder Photoshop, bei denen einzelne Ebenen bearbeitet und übereinander kombiniert werden können, um das fertige Bild zu erstellen.
Am besten erstellen Sie eine neue Ebene mit der CSS-Eigenschaft will-change. Dies funktioniert in Chrome, Opera und Firefox und erstellt mit dem Wert transform eine neue Compositor-Ebene:
.moving-element {
will-change: transform;
}
Bei Browsern, die will-change nicht unterstützen, aber von der Erstellung von Ebenen profitieren, wie z. B. Safari und Mobile Safari, müssen Sie eine 3D-Transformation verwenden, um eine neue Ebene zu erzwingen:
.moving-element {
transform: translateZ(0);
}
Achten Sie jedoch darauf, nicht zu viele Ebenen zu erstellen, da jede Schicht sowohl Speicher- als auch Verwaltungsaufwand erfordert. Weitere Informationen dazu finden Sie im Abschnitt Eigenschaften nur für Compositor-Objekte beibehalten und Anzahl der Ebenen verwalten.
Wenn Sie ein Element auf eine neue Ebene hochgestuft haben, prüfen Sie mithilfe der Entwicklertools, ob Sie dadurch einen Leistungsvorteil erhalten haben. Hochstufen von Elementen nicht ohne Profilerstellung
Weniger Farbbereiche
Manchmal ist jedoch trotz der Förderung von Elementen noch Malerarbeiten erforderlich. Eine große Herausforderung bei Farbproblemen besteht darin, dass Browser zwei Bereiche, die gemalt werden müssen, zusammenschließen. Dies kann dazu führen, dass der gesamte Bildschirm neu gezeichnet wird. Wenn Sie also beispielsweise eine feste Kopfzeile oben auf der Seite haben und etwas am unteren Rand des Bildschirms gezeichnet wird, kann es passieren, dass der gesamte Bildschirm neu gezeichnet wird.
Die Reduzierung von Farbbereichen dient häufig dazu, die Animationen und Übergänge so zu orchestrieren, dass sie sich nicht so stark überschneiden, oder um Möglichkeiten zu finden, die Animation bestimmter Teile der Seite zu vermeiden.
Farbkomplexität vereinfachen
Beim Malen sind manche Dinge teurer als andere. Beispielsweise dauert das Malen bei allem, was eine Unschärfe umfasst (z. B. ein Schatten), länger als das Zeichnen eines roten Kastens. In Bezug auf CSS ist dies jedoch nicht immer offensichtlich: background: red; und box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); scheinen nicht unbedingt sehr unterschiedliche Leistungsmerkmale zu haben, aber dies ist der Fall.
Mit dem obigen Farbprofiler können Sie feststellen, ob Sie andere Möglichkeiten zur Erzielung von Effekten in Betracht ziehen müssen. Fragen Sie sich, ob es möglich ist, günstigere Stile oder andere Methoden zu verwenden, um zu Ihrem Endergebnis zu gelangen.
Insbesondere bei Animationen sollten Sie immer vermeiden, zu malen, da die 10 ms, die Ihnen pro Frame zur Verfügung stehen, normalerweise nicht lang genug sind, um malen zu können. Das gilt insbesondere für Mobilgeräte.