High Performance Mobile Web             Morgan Cheng             Feb 17th, 2012
It is Mobile
Mobile Web   Mobile App
The Middle ManUser               Developer
Multiple Platforms
Mobile Web: Cross Platform Solution
Modern Mobile is Blessed with HTML5
Architecturehttp://blog.sc5.fi/2012/01/html5-web-app-architecture-explained/
These Best Practices Still Work?    http://developer.yahoo.com/performance/rules.html
More Tips
Deal With Designer
In the Eyes of Designer                                         Beautiful                                         Radial  ...
In the Eyes of Developer                               The Background                               Image Might           ...
Balance For Perfect
Cache is Limited
http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
Always Minify Your Resources
Cookie + LocalStorage
More HTTP Requests Mean Slower
First Visit               Without Cookie Server                              Browser         Resources                    ...
Second Visit               With CookieServer                                Browser            Resources                  ...
Favor transition over timer
Animation with TimerChange Element’s Style with setTimeoutBrowser Has No Idea What is Actually Doinghttp://jsfiddle.net/r5...
Animation with TransitionLet Browser Know It is Animationhttp://jsfiddle.net/Rapvs/
Animation with TransitionLet Browser Know It is Animationhttp://jsfiddle.net/Rapvs/With transform, it is betterhttp://jsfi...
Be Careful With CSS3
-webkit-gradient-webkit-box-shadowStatic Images Render Faster
Background Image + ARIA
background-image Faster Than <img><imgsrc=“photo.png” alt=“One Photo”><div id=“photo”></div>#photo {background-image: url(...
background-image only break the semantics
background-image Faster Than <img><div id=“photo” role=“img” aria-label=“One  Photo”></div>#photo {background-image: url(p...
Reduce Reflow & Repaint
HTML        DOM Tree            FlowJavaScript                 Render Tree             Style Sheet                        ...
-webkit-tap-highlight-color:Overrides the highlight color shown when the user taps a link or a JavaScript clickable elemen...
/* Avoid Repaint of JS Clickable Element*/-webkit-tap-highlight-color: transparent
Use Touch Events
touchend Faster Than click
vartapEvent= ‘ontouchend’ in document ?  ‘touchend’ : ‘click’;node.delegate(tapEvent, …);
Hardware Acceleration
http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/
/* Force 3D Acceleration */-webkit-transform: translate3d(0,0,0);-webkit-transform: tranlsateZ(0);-webkit-transform: scale...
Hardware AccelerationConsumes Battery & Memory
AppCache For Full Screen
Ideally, Mobile Web Can Be  Full Screen
$(window).on(load, function() {    /mobile/i.test(navigator.userAgent) &&    !location.hash&&setTimeout(function () {     ...
Address Bar isHidden ToolBar is Still There
<!-- enable full-screen mode --><meta name="apple-mobile-web-app-capable"  content="yes"/><!-- controls the appearance of ...
Status Bar isCustomized ToolBar is Hidden
Till iOS5, Full Screen Web LaunchedFrom Home Screen Cannot Leverage            Browser Cache
AppCache Helps Full Screen<!doctype html><html manifest=“index.appcache”><head>…                      CACHE MANIFEST      ...
Dawn of Mobile Web Performance
Thank You!
Find Me@程墨Morgan@morganchenghttp://www.facebook.com/m       organ.chengmo
High Performance Mobile Web
Upcoming SlideShare
Loading in...5
×

High Performance Mobile Web

6,432

Published on

My Last Tech Talk at Yahoo!

Published in: Technology, Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,432
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. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×