High Performance Mobile Web
•Descargar como PPTX, PDF•
6 recomendaciones•3,392 vistas
My Last Tech Talk at Yahoo!
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (8)
Similar a High Performance Mobile Web
Similar a High Performance Mobile Web (20)
Más de Morgan Cheng
Más de Morgan Cheng (13)
Último
Último (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