GPU Compositing, will-change und der Compositor-Thread
Eine CSS-Animation, die auf dem Compositor-Thread läuft, kann nicht vom JavaScript-Main-Thread blockiert werden. Wer verstehen will, warum manche Animationen bei 60fps fließen und andere ruckeln, muss den Weg vom CSS-Property zur GPU-Layer kennen — und wann will-change hilft statt schadet.
Inhaltsverzeichnis
- 1. Die Browser-Rendering-Pipeline im Überblick
- 2. Main Thread vs. Compositor Thread
- 3. transform vs. top/left — warum der Unterschied riesig ist
- 4. will-change: Layer-Promotion gezielt steuern
- 5. Layer-Promotion: wann der Browser eine neue Compositing-Schicht erstellt
- 6. Die zwei CSS-Properties für Compositor-Animationen: opacity und transform
- 7. Performance-Diagnose mit Chrome DevTools
- 8. Fallstricke: wenn