Paint ist das Ausfüllen von Pixeln, die schließlich auf dem Bildschirm des Nutzers dargestellt werden. Dies ist oft die am längsten laufende aller Aufgaben in der Pipeline und sollte möglichst vermieden werden.
Zusammenfassung
- Das Ändern einer anderen Eigenschaft als „Transform“ oder „Opacity“ löst immer eine Neuzeichnung aus.
- Die Paint-Phase ist oft der kostenintensivste Teil der Pixelpipeline. Vermeide es, wo es möglich ist.
- Reduzieren Sie Farbbereiche durch das Bewerben von Ebenen und die Orchestrierung von Animationen.
- Verwenden Sie den Paint-Profiler in den Chrome-Entwicklertools, um die Komplexität und Kosten der Paint-Operationen zu bewerten und sie nach Möglichkeit zu reduzieren.
Auslösen von Layout und Paint
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 das Layout nicht 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. Ö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 nicht gemalt werden sollten, sollten Sie genauer hinschauen.
Elemente bewerben, die sich bewegen oder verblassen
Das Malen erfolgt nicht immer in einem einzelnen Bild im Arbeitsspeicher. Der Browser kann bei Bedarf sogar mehrere Bilder oder Kompositionsebenen bearbeiten.
Der Vorteil dieses Ansatzes besteht darin, dass Elemente, die regelmäßig neu gerendert werden oder sich auf dem Bildschirm mithilfe von Transformationen bewegen, 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 verwenden Sie die CSS-Eigenschaft will-change, die in allen gängigen modernen Browser-Engines verfügbar ist. Mit einem Wert von transform wird mit will-change eine neue Kompositionebene erstellt:
.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 Sie ein Element in eine neue Ebene verschoben haben, prüfen Sie mithilfe der DevTools, ob sich dadurch die Leistung verbessert hat. Bewerben Sie keine Elemente ohne Profiling.
Farbbereiche reduzieren
Manchmal sind jedoch trotz der Vorbehandlung 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.
Um die Malbereiche zu reduzieren, müssen Sie oft Ihre Animationen und Übergänge so steuern, dass sie sich nicht so stark überschneiden, oder nach Möglichkeiten suchen, bestimmte Bereiche der Seite nicht zu animieren.
Paint-Komplexität vereinfachen
Beim Malen 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 CSS ist das jedoch nicht immer offensichtlich: background: red; und box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); sehen nicht unbedingt so aus, als hätten sie stark unterschiedliche Leistungsmerkmale, aber das ist der Fall.
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.
Vermeiden Sie nach Möglichkeit das Zeichnen bei Animationen, da die 10 Millisekunden pro Frame normalerweise nicht ausreichen, um die Zeichnung abzuschließen, insbesondere auf Mobilgeräten.