Extended slow parts

1,246 views
1,176 views

Published on

HTML5 introduces new features, learn how to use them to have a most responsive website

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,246
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Extended slow parts

  1. 1. Extended Slow Parts HTML 5 meets browsers Francesco Fullone ff AT ideato.it
  2. 2. Who am I? Francesco Fullone aka Fullo - PHP developer since 1999 - President - and Open Source Evangelist - CEO @ - Nerd and geek
  3. 3. Did you attend the “Please, don't touch the slow parts” speech?
  4. 4. We introduced the frontend performance problem.
  5. 5. It's time to make evolve that speech!
  6. 6. Let's introduce HTML5
  7. 7. It is not a “revolution”
  8. 8. it will be ready for 2012 (but not fully supported until 2020) HTML5
  9. 9. Right now there is some confusion on what should works.
  10. 10. HTML 5 state of art
  11. 11. But we don't care, we are brave developers. DEV
  12. 12. And we want to know which parts “we can touch”
  13. 13. do less requests place the parts in the right places reduce the data Repeat the learned lessons: http://www.flickr.com/photos/seetefl/4111987480
  14. 14. do less request: Use cache manifest for live sites, not just offline apps
  15. 15. do less request: use web storage instead of cookies http://www.flickr.com/photos/betsyweber/4962298614/
  16. 16. do less request: Use client-side databases instead of server roundtrips
  17. 17. reduce the (transmitted) data: WebSockets for faster delivery with less bandwidth than XHR http://www.flickr.com/photos/exalthim/1594948378/
  18. 18. reduce the (transmitted) data: Use CSS3 effects instead of requesting heavy image sprites (and save designers from an headache every time they have to update it) http://www.flickr.com/photos/elderleaf/1395164209
  19. 19. place the parts in the right places: For CPU-heavy operations: Web Workers deliverhttp://www.flickr.com/photos/osde-info/2261186236
  20. 20. place the parts in the right places: Use CSS Transitions instead of JavaScript animation .classname { -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); } .classname:hover{ -webkit-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px); -moz-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px); }
  21. 21. Don't forget the main lesson!
  22. 22. Everything's a tradeoff
  23. 23. ?
  24. 24. phpDay 2011 12-14 Maggio 2011 www.phpday.it
  25. 25. via Quinto Bucci 205 47023 Cesena (FC) info AT ideato.it www.ideato.it rate this talk: http://joind.in/2121

×