CSS Performance

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

Transcript

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