High Performance Mobile Web

6,701
-1

Published on

My Last Tech Talk at Yahoo!

Published in: Technology, Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,701
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
45
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

High Performance Mobile Web

  1. 1. High Performance Mobile Web Morgan Cheng Feb 17th, 2012
  2. 2. It is Mobile
  3. 3. Mobile Web Mobile App
  4. 4. The Middle ManUser Developer
  5. 5. Multiple Platforms
  6. 6. Mobile Web: Cross Platform Solution
  7. 7. Modern Mobile is Blessed with HTML5
  8. 8. Architecturehttp://blog.sc5.fi/2012/01/html5-web-app-architecture-explained/
  9. 9. These Best Practices Still Work? http://developer.yahoo.com/performance/rules.html
  10. 10. More Tips
  11. 11. Deal With Designer
  12. 12. In the Eyes of Designer Beautiful Radial GradientSmoothRotating Stereovision created by shadow
  13. 13. In the Eyes of Developer The Background Image Might Hurt PerformanceWhat’s therotatingcenter, radiusand angle? Should The Shadow Be CSS or Image?
  14. 14. Balance For Perfect
  15. 15. Cache is Limited
  16. 16. http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
  17. 17. Always Minify Your Resources
  18. 18. Cookie + LocalStorage
  19. 19. More HTTP Requests Mean Slower
  20. 20. First Visit Without Cookie Server Browser Resources LocalStorage Big HTMLWith inline JS, CSS Extract Resources and Save toand data-URI LocalStorage; Set Cookie
  21. 21. Second Visit With CookieServer Browser Resources LocalStorage Big HTMLWith reference to Load Resources and Insertkeys in LocalStorage into DOM
  22. 22. Favor transition over timer
  23. 23. Animation with TimerChange Element’s Style with setTimeoutBrowser Has No Idea What is Actually Doinghttp://jsfiddle.net/r5mYr/
  24. 24. Animation with TransitionLet Browser Know It is Animationhttp://jsfiddle.net/Rapvs/
  25. 25. Animation with TransitionLet Browser Know It is Animationhttp://jsfiddle.net/Rapvs/With transform, it is betterhttp://jsfiddle.net/DwtCc/
  26. 26. Be Careful With CSS3
  27. 27. -webkit-gradient-webkit-box-shadowStatic Images Render Faster
  28. 28. Background Image + ARIA
  29. 29. background-image Faster Than <img><imgsrc=“photo.png” alt=“One Photo”><div id=“photo”></div>#photo {background-image: url(photo.png);}
  30. 30. background-image only break the semantics
  31. 31. background-image Faster Than <img><div id=“photo” role=“img” aria-label=“One Photo”></div>#photo {background-image: url(photo.png);}
  32. 32. Reduce Reflow & Repaint
  33. 33. HTML DOM Tree FlowJavaScript Render Tree Style Sheet Paint
  34. 34. -webkit-tap-highlight-color:Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iOS.
  35. 35. /* Avoid Repaint of JS Clickable Element*/-webkit-tap-highlight-color: transparent
  36. 36. Use Touch Events
  37. 37. touchend Faster Than click
  38. 38. vartapEvent= ‘ontouchend’ in document ? ‘touchend’ : ‘click’;node.delegate(tapEvent, …);
  39. 39. Hardware Acceleration
  40. 40. http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/
  41. 41. /* Force 3D Acceleration */-webkit-transform: translate3d(0,0,0);-webkit-transform: tranlsateZ(0);-webkit-transform: scale3d(1,1,1);-webkit-transform: scale3dZ(1);
  42. 42. Hardware AccelerationConsumes Battery & Memory
  43. 43. AppCache For Full Screen
  44. 44. Ideally, Mobile Web Can Be Full Screen
  45. 45. $(window).on(load, function() { /mobile/i.test(navigator.userAgent) && !location.hash&&setTimeout(function () { if (!win.pageYOffset) window.scrollTo(0, 1); }, 200);});
  46. 46. Address Bar isHidden ToolBar is Still There
  47. 47. <!-- enable full-screen mode --><meta name="apple-mobile-web-app-capable" content="yes"/><!-- controls the appearance of the status bar in full-screen mode --><meta name="apple-mobile-web-app-status- bar-style" content="black"/>
  48. 48. Status Bar isCustomized ToolBar is Hidden
  49. 49. Till iOS5, Full Screen Web LaunchedFrom Home Screen Cannot Leverage Browser Cache
  50. 50. AppCache Helps Full Screen<!doctype html><html manifest=“index.appcache”><head>… CACHE MANIFEST x.html xxx.js xxx.css xxxxxx.png
  51. 51. Dawn of Mobile Web Performance
  52. 52. Thank You!
  53. 53. Find Me@程墨Morgan@morganchenghttp://www.facebook.com/m organ.chengmo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×