Extended Slow PartsHTML 5 meets browsers

Francesco Fullone

ff AT ideato.it

Who am I?

Francesco Fullone aka Fullo

- PHP developer since 1999

- President

- and Open Source Evangelist

- CEO @

- Nerd and geek

Did you attend the

“Please, don't touch the slow parts”

speech?

We introduced

the frontend

performance problem.

It's time to

make evolve

that speech!

Let's introduce HTML5

It is not a “revolution”

it will be ready for 2012

(but not fully supported until 2020)

HTML5

Right now there is some confusion on what should

works.

HTML 5 state of art

But we don't care, we are brave developers.

DEV

And we want to know which

parts

“we can touch”

do less requests

place the parts in the right places

reduce the data

Repeat the learned lessons:

http://www.flickr.com/photos/seetefl/4111987480

do less request:

Use cache manifest for live sites, not just offline apps

do less request:

use web storage

instead of cookies

http://www.flickr.com/photos/betsyweber/4962298614/

do less request:

Use client-side databases instead of server roundtrips

reduce the (transmitted) data:

WebSockets for

faster delivery with

less bandwidth

than XHR

http://www.flickr.com/photos/exalthim/1594948378/

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

place the parts in the right places:

For CPU-heavy

operations:

Web Workers deliverhttp://www.flickr.com/photos/osde-info/2261186236

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);}

Don't forget the

main lesson!

Everything's a tradeoff

?

phpDay 201112-14 Maggio 2011

www.phpday.it

via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it

rate this talk: http://joind.in/2121