Francesco Fullone gave a talk about optimizing frontend performance using HTML5 features. He discussed how HTML5 is not yet fully supported but parts can be used now to improve performance. He recommended techniques like using cache manifests, web storage, client-side databases, WebSockets, CSS effects instead of image sprites, and Web Workers to reduce requests and data size. CSS transitions were suggested instead of JavaScript animations. The main lesson is that optimizations require tradeoffs and not all HTML5 features are ready yet.
18. reduce the (transmitted) data:
WebSockets for
faster delivery with
less bandwidth
than XHR
http://www.flickr.com/photos/exalthim/1594948378/
19. 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
20. place the parts in the right places:
For CPU-heavy
operations:
Web Workers deliverhttp://www.flickr.com/photos/osde-info/2261186236
21. 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);
}