Fuchs-ing an iPad HTML5 app for performance

Thomas has a great post today on how he took the lovely Every Time Zone HTML5 app for the iPad and went deep to make it perform smoothly to match its beauty.

He has documented what he did:

Canvas optimizations over images: Thomas found out that using -webkit-gradient produces images which slow down the rendering on the iPad itself. His optimization was to use a <canvas> and only repaint what was needed.
Avoid text-shadow & box-shadow: Great. but slow
Hardware-acceleration is quite new… and buggy (aside: he called out some new scripty2 hw accel demos coming maybe as soon as next week!)
touch events fire before click events (use element[supportsTouch ? 'ontouchmove' : 'onmousemove'] = function(){})
Avoid opacity: Found that it can interfere with hw acceleration
Don’t use a js lib unless you need it. Every bit matters

Maybe iPhone OS 4 will change the characteristics…. but who knows. Good stuff.

Posted by Dion Almaer at 11:45 am
1 Comment