Paint ist der Prozess, bei dem Pixel ausgefüllt werden, die schließlich in das Bildschirmen. Dies ist oft die am längsten laufende aller Aufgaben in der Pipeline und sollte, wenn möglich, vermieden werden.
Paint ist das Ausfüllen von Pixeln, die schließlich der Nutzenden Bildschirmen. Es ist oft die am längsten laufende aller Aufgaben im und eine, die Sie nach Möglichkeit vermeiden sollten.
Zusammenfassung
- Wenn Sie eine Eigenschaft ändern, mit Ausnahme von Transformationen oder Deckkraft, wird immer die Farbe übertragen.
- Paint ist oft der teuerste Teil der Pixelpipeline. wo es möglich ist.
- 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.
Layout und Paint auslösen
Wenn Sie das Layout auslösen, wird immer Paint ausgelöst, da eine Änderung der Geometrie eines Elements zur Korrektur der Pixel führt.
Sie können 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:
Mit den Chrome-Entwicklertools schnell Farbengpässe identifizieren
Mit den Chrome-Entwicklertools können Sie schnell Bereiche identifizieren, die gezeichnet werden. Tab „Rendering“ öffnen und aktivieren Sie dann Paint-Flashing.
Wenn diese Option aktiviert ist, blinkt der Bildschirm in Chrome jedes Mal grün, wenn gemalt wird. Wenn Sie sehen, dass der gesamte Bildschirm grün blinkt oder Bereiche auf dem Bildschirm, von denen Sie dachten, dass sie nicht gezeichnet werden sollten, sollten Sie etwas genauer hinsehen.
Elemente bewerben, die sich bewegen oder verblassen
Es wird nicht immer ein einzelnes Bild im Speicher gemalt. Tatsächlich kann der Browser bei Bedarf mehrere Bilder oder zusammengesetzte Ebenen darstellen.
Der Vorteil dieses Ansatzes besteht darin, dass Elemente, die regelmäßig neu gezeichnet werden oder sich mit Transformationen auf dem Bildschirm bewegen, ohne Auswirkungen auf andere Elemente verarbeitet werden können. 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. Dies funktioniert in Chrome, Opera und Firefox. Mit dem Wert transform wird eine neue Compositor-Ebene erstellt:
.moving-element {
will-change: transform;
}
Bei Browsern, die will-change nicht unterstützen, aber von der Ebenenerstellung profitieren (z. B. Safari und Mobile Safari), muss eine 3D-Transformation falsch verwendet werden, um eine neue Ebene zu erzwingen:
.moving-element {
transform: translateZ(0);
}
Achten Sie jedoch darauf, nicht zu viele Ebenen zu erstellen, da für jede Ebene sowohl Arbeitsspeicher als auch Verwaltung benötigt wird. Weitere Informationen dazu finden Sie im Abschnitt Nur Compositor-Eigenschaften beibehalten und Ebenenanzahl 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. Produkte dürfen nicht ohne Profilerstellung beworben werden.
Farbbereiche reduzieren
Manchmal sind jedoch trotz der Förderung von Elementen weitere Farbarbeiten erforderlich. Eine große Herausforderung bei Farbproblemen besteht darin, dass Browser zwei Bereiche verbinden, die gemalt werden müssen. Dies kann dazu führen, dass der gesamte Bildschirm neu gezeichnet werden muss. Wenn Sie beispielsweise eine feste Kopfzeile oben auf der Seite und etwas unten auf dem Bildschirm haben, kann der gesamte Bildschirm neu gezeichnet werden.
Bei der Reduzierung von Farbbereichen werden Ihre Animationen und Übergänge häufig so organisiert, dass sie sich nicht so stark überlappen, oder Sie müssen Möglichkeiten finden, bestimmte Teile der Seite nicht zu animieren.
Paint-Komplexität vereinfachen
Wenn es um Malerei geht, sind manche Dinge teurer als andere. Bei allen Elementen mit Unschärfen, wie z. B. einem Schatten, dauert das Zeichnen beispielsweise länger als das Zeichnen eines roten Kastens. 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.
Mit dem obigen Paint-Profiler können Sie feststellen, ob Sie nach anderen Möglichkeiten suchen müssen, um Effekte zu erzielen. Frage dich, ob es möglich ist, günstigere Stile oder alternative Methoden zu verwenden, um zu deinem Endergebnis zu gelangen.
Vor allem auf Mobilgeräten sollten Sie Paint während der Animation immer vermeiden, da die verfügbaren 10 ms pro Frame normalerweise nicht lang genug sind, um Paint-Arbeiten durchzuführen.