Slides for the first meetup of Frontend in Milan Presentazione per il primo meetup di Frontend a Milano November, 24th 2015

1. CSS
PERFORMANCE
24 NOVEMBRE 2015
FRONTEND MILANO MEETUP

2. GIACOMO "GIKO" ZINETTI
NERD FRONTEND WEB DEVELOPER
@GIACOMOZINETTI

3. PERFORMANCE
Qualcosa da misurare
Target / Riferimento

4. PARLANDO DI CSS
Velocità scroll
Velocità trasformazioni

5. MISSION: 60FPS
1 FRAME = 16.66MS

6. FRAME
The pixel pipeline

7. STRUMENTI
Devtools
Timeline con Capture Paint
Paint flashing

8. DEMO TIME

9. TRASFORMAZIONI
Ridurre le operazioni del browser
COME?
Transform e Opacity evitano le fasi di Layout e Paint

10. SCROLL
Sfruttare i layer
Supporto della GPU, ma non troppo
COME?
will-change: transform;
transform: translateZ(0);

11. RISULTATO
Miglior UX
Consumi minori

12. BONUS
window.requestAnimationFrame(callback);
window.requestIdleCallback(callback);

14. LINKS
Performance exercise
Rendering performance | Web Fundamentals
CSS Triggers
requestAnimationFrame
requestIdleCallback

15. THANK YOU
#perfmatters
@giacomozinetti