Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile WebKit Optimizations & Tools

3,110 views

Published on

Slides from my August 10, 2011, presentation to the Mt View JavaScript Meetup.

Published in: Technology
  • Great talk! Thanks for sharing the slides
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Mobile WebKit Optimizations & Tools

  1. 1. Mobile WebKitOptimizations & Tools Andrew Hedges Lead Engineer, Tapulous @segdeha 1
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. Optimizing for mobile 8
  9. 9. Reduce the number of requests• concatenate and/or inline CSS & JS• image sprites• inline, base64 binary assets 9
  10. 10. Send fewer bytes• gzip text resources• uglify/minify CSS & JS• properly compress images• use cookie-less hosts for static assets• leave out unnecessary tags? 10
  11. 11. Cache aggressively• HTML5 cache manifest• localStorage• custom, in-app caching• reference in-app resources? 11
  12. 12. Leverage CSS3• transforms, transitions, animations• gradients (& other techniques) in place of images• 9-slice borders using border-image 12
  13. 13. Use JavaScript conservatively• use touch events• reduce the use of closures• only execute the code you need 13
  14. 14. Donʼt reinvent the wheel• Zepto• jQTouch• iScroll• underscore.js & backbone.js 14
  15. 15. Tools of the trade• Charles Proxy• Weinre 15
  16. 16. Questions?andrew@hedges.name @segdeha 16

×