Extended slow parts
-
Upload
francesco-fullone -
Category
Technology
-
view
1.037 -
download
0
description
Transcript of Extended slow parts
![Page 1: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/1.jpg)
Extended Slow PartsHTML 5 meets browsers
Francesco Fullone
ff AT ideato.it
![Page 2: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/2.jpg)
Who am I?
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Open Source Evangelist
- CEO @
- Nerd and geek
![Page 3: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/3.jpg)
Did you attend the
“Please, don't touch the slow parts”
speech?
![Page 4: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/4.jpg)
We introduced
the frontend
performance problem.
![Page 5: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/5.jpg)
It's time to
make evolve
that speech!
![Page 6: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/6.jpg)
Let's introduce HTML5
![Page 7: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/7.jpg)
It is not a “revolution”
![Page 8: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/8.jpg)
it will be ready for 2012
(but not fully supported until 2020)
HTML5
![Page 9: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/9.jpg)
Right now there is some confusion on what should
works.
![Page 10: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/10.jpg)
HTML 5 state of art
![Page 11: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/11.jpg)
![Page 12: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/12.jpg)
But we don't care, we are brave developers.
DEV
![Page 13: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/13.jpg)
And we want to know which
parts
“we can touch”
![Page 14: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/14.jpg)
do less requests
place the parts in the right places
reduce the data
Repeat the learned lessons:
http://www.flickr.com/photos/seetefl/4111987480
![Page 15: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/15.jpg)
do less request:
Use cache manifest for live sites, not just offline apps
![Page 16: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/16.jpg)
do less request:
use web storage
instead of cookies
http://www.flickr.com/photos/betsyweber/4962298614/
![Page 17: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/17.jpg)
do less request:
Use client-side databases instead of server roundtrips
![Page 18: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/18.jpg)
reduce the (transmitted) data:
WebSockets for
faster delivery with
less bandwidth
than XHR
http://www.flickr.com/photos/exalthim/1594948378/
![Page 19: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/19.jpg)
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
![Page 20: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/20.jpg)
place the parts in the right places:
For CPU-heavy
operations:
Web Workers deliverhttp://www.flickr.com/photos/osde-info/2261186236
![Page 21: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/21.jpg)
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);}
![Page 22: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/22.jpg)
Don't forget the
main lesson!
![Page 23: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/23.jpg)
Everything's a tradeoff
![Page 24: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/24.jpg)
?
![Page 25: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/25.jpg)
phpDay 201112-14 Maggio 2011
www.phpday.it
![Page 26: Extended slow parts](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b683114a795917698b462e/html5/thumbnails/26.jpg)
via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it
rate this talk: http://joind.in/2121