Recommendations 1. Optimize JavaScript Execution 2. Reduce the Scope and Complexity of Style Calculations 3. Avoid Large, Complex Layouts and Layout Thrashing 4. Simplify Paint Complexity and Reduce Paint Areas 5. Stick to Compositor-Only Properties and Manage Layer Count 6. Debounce Your Input Handlers
Infinite hidden animation See: https://codepen.io/mazipan/details/gOGLpev Problems: - Skeleton loading for hidden element triggering repaint Alternatives: - Remove skeleton loading, or - Only show before the element will showing
JS First Problems: - Countdown timer w JS approach will always trigger repaint for every second Alternatives: - Use CSS/SVG transition w JS for only generating the initial state
Key Takeaways 1. Stick to the compositor-only props 2. Double check your Stacking Layer 3. Check the hidden element 4. CSS First 5. Measure periodically