High Performance Mobile Web
•Als PPTX, PDF herunterladen•
6 gefällt mir•3,392 views
My Last Tech Talk at Yahoo!
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (8)
Ähnlich wie High Performance Mobile Web
Ähnlich wie High Performance Mobile Web (20)
Mehr von Morgan Cheng
Mehr von Morgan Cheng (13)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
High Performance Mobile Web
- 1. High Performance Mobile Web Morgan Cheng Feb 17th, 2012
- 2. It is Mobile
- 3. Mobile Web Mobile App
- 4. The Middle Man User Developer
- 6. Mobile Web: Cross Platform Solution
- 7. Modern Mobile is Blessed with HTML5
- 9. These Best Practices Still Work? http://developer.yahoo.com/performance/rules.html
- 10. More Tips
- 13. In the Eyes of Designer Beautiful Radial Gradient Smooth Rotating Stereovision created by shadow
- 14. In the Eyes of Developer The Background Image Might Hurt Performance What’s the rotating center, radius and angle? Should The Shadow Be CSS or Image?
- 16. Cache is Limited
- 18. Always Minify Your Resources
- 20. More HTTP Requests Mean Slower
- 21. First Visit Without Cookie Server Browser Resources LocalStorage Big HTML With inline JS, CSS Extract Resources and Save to and data-URI LocalStorage; Set Cookie
- 22. Second Visit With Cookie Server Browser Resources LocalStorage Big HTML With reference to Load Resources and Insert keys in LocalStorage into DOM
- 23. Favor transition over timer
- 24. Animation with Timer Change Element’s Style with setTimeout Browser Has No Idea What is Actually Doing http://jsfiddle.net/r5mYr/
- 25. Animation with Transition Let Browser Know It is Animation http://jsfiddle.net/Rapvs/
- 26. Animation with Transition Let Browser Know It is Animation http://jsfiddle.net/Rapvs/ With transform, it is better http://jsfiddle.net/DwtCc/
- 27. Be Careful With CSS3
- 29. Background Image + ARIA
- 30. background-image Faster Than <img> <imgsrc=“photo.png” alt=“One Photo”> <div id=“photo”></div> #photo { background-image: url(photo.png); }
- 31. background-image only break the semantics
- 32. background-image Faster Than <img> <div id=“photo” role=“img” aria-label=“One Photo”></div> #photo { background-image: url(photo.png); }
- 33. Reduce Reflow & Repaint
- 34. HTML DOM Tree Flow JavaScript Render Tree Style Sheet Paint
- 35. -webkit-tap-highlight-color: Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iOS.
- 36. /* Avoid Repaint of JS Clickable Element*/ -webkit-tap-highlight-color: transparent
- 37. Use Touch Events
- 38. touchend Faster Than click
- 39. vartapEvent= ‘ontouchend’ in document ? ‘touchend’ : ‘click’; node.delegate(tapEvent, …);
- 42. /* Force 3D Acceleration */ -webkit-transform: translate3d(0,0,0); -webkit-transform: tranlsateZ(0); -webkit-transform: scale3d(1,1,1); -webkit-transform: scale3dZ(1);
- 43. Hardware Acceleration Consumes Battery & Memory
- 44. AppCache For Full Screen
- 45. Ideally, Mobile Web Can Be Full Screen
- 46. $(window).on('load', function() { /mobile/i.test(navigator.userAgent) && !location.hash&& setTimeout(function () { if (!win.pageYOffset) window.scrollTo(0, 1); }, 200); });
- 47. Address Bar is Hidden ToolBar is Still There
- 48. <!-- 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"/>
- 49. Status Bar is Customized ToolBar is Hidden
- 50. Till iOS5, Full Screen Web Launched From Home Screen Cannot Leverage Browser Cache
- 51. AppCache Helps Full Screen <!doctype html> <html manifest=“index.appcache”> <head> … CACHE MANIFEST x.html xxx.js xxx.css xxxxxx.png
- 52. Dawn of Mobile Web Performance
- 53. Thank You!
- 54. Find Me @程墨Morgan @morgancheng http://www.facebook.com/m organ.chengmo