Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS performance

761 views

Published on

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

Published in: Software
  • Be the first to comment

CSS performance

  1. 1. CSS PERFORMANCE 24 NOVEMBRE 2015 FRONTEND MILANO MEETUP
  2. 2. GIACOMO "GIKO" ZINETTI NERD FRONTEND WEB DEVELOPER @GIACOMOZINETTI
  3. 3. PERFORMANCE Qualcosa da misurare Target / Riferimento
  4. 4. PARLANDO DI CSS Velocità scroll Velocità trasformazioni
  5. 5. MISSION: 60FPS 1 FRAME = 16.66MS
  6. 6. FRAME The pixel pipeline
  7. 7. STRUMENTI Devtools Timeline con Capture Paint Paint flashing
  8. 8. DEMO TIME
  9. 9. TRASFORMAZIONI Ridurre le operazioni del browser COME? Transform e Opacity evitano le fasi di Layout e Paint
  10. 10. SCROLL Sfruttare i layer Supporto della GPU, ma non troppo COME? will-change: transform; transform: translateZ(0);
  11. 11. RISULTATO Miglior UX Consumi minori
  12. 12. BONUS window.requestAnimationFrame(callback); window.requestIdleCallback(callback);
  13. 13. LINKS Performance exercise Rendering performance | Web Fundamentals CSS Triggers requestAnimationFrame requestIdleCallback
  14. 14. THANK YOU #perfmatters @giacomozinetti

×