Insbesondere auf Mobilgeräten ist es wichtig, auf Farben zu verzichten, um eine flüssige Framerate zu erzielen. Manchmal taucht jedoch Farbe auch an ungewöhnlichsten Orten auf. In diesem Artikel erfährst du, warum animierte GIFs zu unnötigen Farben führen können und wie einfach du das Problem beheben kannst.
Schichten der Schönheit
Wie Sie wahrscheinlich wissen, übertragen moderne Browser Gruppen von DOM-Elementen möglicherweise in separate "Bilder", die als Layers bezeichnet werden. Manchmal gibt es eine Ebene für die gesamte Seite, manchmal gibt es Hunderte oder in seltenen Fällen sogar Tausende!
Wenn DOM-Elemente in einer Ebene gruppiert werden und eines der Elemente sich visuell ändert, muss nicht nur das geänderte Element dargestellt werden, sondern alle anderen Elemente in der Ebene, die das geänderte Element überlappen. Wenn Sie eine Sache auf ein anderes übertragen, gehen die überschriebenen Pixel praktisch für immer verloren. Wenn Sie die ursprünglichen Pixel wieder verwenden möchten, müssen Sie sie übermalen.
Manchmal möchten wir daher ein Element von den anderen isolieren, damit wir die anderen Elemente, die sich nicht geändert haben, nicht neu streichen müssen. Wenn Sie beispielsweise eine feste Kopfzeile mit scrollbaren Inhalten kombinieren, müssen Sie die Kopfzeile jedes Mal neu zeichnen, wenn der Inhalt gescrollt wird, sowie den neu sichtbaren Inhalt. Durch Platzierung des Headers in einer separaten Ebene kann der Browser das Scrollen optimieren. Wenn Sie scrollen, kann der Browser die Ebenen verschieben – wahrscheinlich mithilfe der GPU – und vermeiden, die Ebenen neu zu malen.
Jede zusätzliche Ebene erhöht den Speicherverbrauch und den Leistungsaufwand. Daher ist es das Ziel, die Seite in möglichst wenige Ebenen zu gruppieren und gleichzeitig eine gute Leistung zu erzielen.
Was hat das alles mit animierten GIFs zu?
Sehen wir uns dieses Bild an:
Dies ist eine mögliche Ebeneneinrichtung für eine einfache App. Hier gibt es vier Ebenen: drei davon (die Schichten 2 bis 4) sind Oberflächenelemente. Die untere Ebene ist ein Ladeprogramm, also ein animiertes GIF. Im normalen Ablauf zeigen Sie das Ladeprogramm (Ebene 1) an, während Ihre Anwendung geladen wird. Sobald alles fertig ist, zeigen Sie die anderen Ebenen an. Wichtig ist: Du musst das animierte GIF ausblenden.
Aber warum muss ich ihn verstecken?!
Gute Frage. Im Idealfall würde der Browser einfach die Sichtbarkeit des GIF für dich prüfen und vermeiden, automatisch zu malen. Leider ist die Überprüfung, ob das animierte GIF auf dem Bildschirm verdeckt oder sichtbar ist, in der Regel kostspieliger, als es einfach zu malen, damit es gezeichnet wird.
Im besten Fall befindet sich die GIF-Datei in einem eigenen Layer und der Browser muss sie nur malen und auf die GPU hochladen. Im schlimmsten Fall könnten jedoch alle Ihre Elemente in einer einzigen Ebene gruppiert werden und der Browser muss jedes einzelne Element neu zeichnen. Wenn der Vorgang abgeschlossen ist, muss noch alles auf die GPU hochgeladen werden. All dies funktioniert bei jedem GIF-Frame, obwohl die Nutzenden das GIF nicht mal sehen können!
Auf Desktops können Sie mit dieser Art von Painting-Verhalten wahrscheinlich durchkommen, da die CPUs und GPUs leistungsstärker sind und es genügend Bandbreite für die Datenübertragung zwischen den beiden gibt. Auf Mobilgeräten ist das Streichen jedoch extrem teuer, weshalb Sie sehr sorgfältig vorgehen müssen.
Welche Browser sind davon betroffen?
Das ist in der Regel auch bei verschiedenen Browsern unterschiedlich. Heute werden die Darstellung von Chrome, Safari und Opera immer wieder aktualisiert, selbst wenn die GIF-Datei verdeckt ist. Firefox dagegen stellt fest, dass das GIF verdeckt ist und nicht übermalt werden muss. Internet Explorer bleibt eher wie eine Blackbox, und selbst in IE11 - da sich die F12-Tools noch in der Entwicklungsphase befinden - gibt es keinen Hinweis darauf, ob eine Aktualisierung durchgeführt wird oder nicht.
Woran erkenne ich, ob dieses Problem vorliegt?
Am einfachsten ist es, die Option „Darstellungsrechtecke anzeigen“ in den Chrome-Entwicklertools zu verwenden. Laden Sie die Entwicklertools, klicken Sie auf das Zahnradsymbol in der rechten unteren Ecke (
) und wählen Sie unter Rendering die Option Darstellungsrechtecke anzeigen aus.
Jetzt müssen Sie nur noch nach einem roten Rechteck wie dem folgenden suchen:
Das kleine rote Feld auf dem Bildschirm zeigt an, dass Chrome einen neuen Farbton erstellt. Sie wissen, dass hinter den anderen Elementen ein Lade-GIF verborgen ist. Wenn Sie also ein rotes Feld wie dieses sehen, müssen Sie die sichtbaren Elemente ausblenden und prüfen, ob Sie das animierte GIF weggedreht haben. Bei Bedarf müssen Sie CSS- oder JavaScript-Code einfügen, um display: none oder visibility: hidden auf das Element oder das übergeordnete Element anzuwenden. Wenn es sich nur um ein Hintergrundbild handelt, sollten Sie es natürlich entfernen.
Ein Beispiel für dieses Verhalten auf einer Livewebsite finden Sie bei Allegro. Dort enthält das Bild jedes Produkts ein Lade-GIF, das verdeckt und nicht explizit ausgeblendet ist.
Fazit
60 fps bedeutet, dass du nur das tun musst, was zum Rendern der Seite erforderlich ist, und nicht mehr. Um dieses Ziel zu erreichen, ist das Entfernen überschüssiger Farben ein entscheidender Schritt. Animierte GIFs, die noch ausgeführt werden, können unnötige Paints auslösen. Diese können Sie mit dem Tool "Show Paint Rectangles" in den Entwicklertools leicht finden und debuggen.
Das animierte Kätzchenlade-GIF wurde nicht ewig geladen.