Your SlideShare is downloading. ×
0
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
High Performance Mobile Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

High Performance Mobile Web

6,329

Published on

My Last Tech Talk at Yahoo!

My Last Tech Talk at Yahoo!

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×