Warum ruckelt meine Animation auf mobilen Geräten?
Diagnostizieren und beheben Sie Framerate-Einbrüche auf Smartphones: Layout-Reflows, Repaints, Garbage Collection und GPU-Ebenen.
Kernaussage
Animationsruckler auf Smartphones entstehen fast immer dadurch, dass Eigenschaften animiert werden, die eine Neukalkulation des Layouts (wie width, height, top oder left) oder ein Neuzeichnen (wie box-shadow) erzwingen. Um stabile 60 oder 120 FPS zu erreichen, animieren Sie ausschließlich transform und opacity und lagern Sie Elemente via will-change: transform auf eigene GPU-Ebenen aus.
Die Rendering-Pipeline mobiler Prozessoren
Browser rendern jedes Bild in fünf Phasen: JavaScript, Stile, Layout, Paint und Composite. Während Desktop-CPUs kontinuierliche Layout-Berechnungen kaschieren, brechen Mobilchips bei erzwungenem Layout-Reflow pro Bild sofort ein.
Die goldene Regel: Nur Composite-Eigenschaften animieren
Nur zwei CSS-Eigenschaften werden direkt auf der GPU ohne Layout- oder Zeichenphase verarbeitet: transform und opacity. Wer die Höhe für ein Akkordeon animiert, zwingt den Browser, alle nachfolgenden Elemente auf jedem Bild neu zu berechnen.
- Animieren Sie niemals width, height, margin, padding, top oder left
- Ersetzen Sie Höhenänderungen durch transform: scaleY() oder FLIP-Techniken
- Lagern Sie Elemente via will-change: transform auf GPU-Ebenen aus (und entfernen Sie es danach)
- Vermeiden Sie schwere Unschärfen oder wandernde Schatten auf Mobilgeräten
Garbage Collection und JavaScript-Engpässe
Bibliotheken, die pro Animations-Frame neue Objekte oder Arrays anlegen, überlasten die automatische Speicherbereinigung (GC). Springt der Garbage Collector auf Mobil-CPUs an, pausiert die Ausführung für 20 bis 50 ms – ein sichtbarer Ruckler entsteht.
Pixeldichte (DevicePixelRatio) bei Canvas-Flächen
Smartphones nutzen 2x- oder 3x-Pixeldichten. Das Rendern komplexer Canvas- oder WebGL-Animationen in nativer Auflösung ohne Drosselung überlastet die Speicherbandbreite und erhitzt mobile Grafikchips.
Wichtige Prinzipien
- Beschränken Sie sich bei kontinuierlicher Bewegung strikt auf transform und opacity
- Nutzen Sie das Performance-Panel der Chrome DevTools mit 4-facher CPU-Drosselung
- Vermeiden Sie Objekterzeugungen in requestAnimationFrame gegen GC-Pausen
- Entfernen Sie will-change nach Animationsende zur Schonung des Videospeichers
Häufige Fragen
Quellen
- Rendering Performance — Google Web Fundamentals
- CSS Triggers (Layout, Paint, Composite) — Paul Irish / Google