Friday, June 4th, 2010

Fuchs-ing an iPad HTML5 app for performance

Category: 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

4 rating from 1 votes

1 Comment »

Comments feed TrackBack URI

Wonder what is up with the iPad, eh?

Comment by Jordan1 — June 4, 2010

Leave a comment

You must be logged in to post a comment.