针对iPad平台的高性能网站架构
- 1. 1
- 2. Summary • High Performance Infrastructure • High Compatibility UI Pattern • YSlow & Mobile Web Best Practices • What’s Special on iPad? 2
- 3. Traffic Load Balancer Web Server Web Server Web Server Web Server Server Farm (VM) Distributed Cache Application Server Server Farm Farm 3
- 4. MVC in JS at Client Browser Controller – Script# View - jTemplate Model – Restful Service ASP.NET MVC 2 4
- 5. YSlow & Mobile Web Best Practices • http://developer.yahoo.com/performance/rules.html • http://www.w3.org/TR/mwabp/ Mini* More Requests Cache Optimized Less HTML & Cookie CSS 5
- 6. Mini* Requests 40-60% of visitors come in with an empty cache. • CSS Sprites • Merge CSS & JS • Pre-load/Post-load Minimize • Minify CSS & JS • Gzip • JSON vs XML Minify • Optimize image dimension and quality 6
- 7. Cache 80-90% of response time is for downloading resources. Version and never expire static resources Set cache-control header for cacheable dynamic resources Use CDN 7
- 8. Cookie Every request (even static resource) carries the active cookie data at the same domain. Eliminate unnecessary cookies Set cookie at minimal domain level Expire cookie ASAP Minimize cookie size 8
- 9. Optimize HTML & CSS W3C Scripts at Validation Bottom Avoid External Empty CSS & JS Image src 9
- 10. What’s Special on iPad? New Cache Instable New Events Slower CPU Dimensions Limitation Network 255K - Slower cacheable Tap Viewport HTML request Connection Engine size Lost Slower 1.5M - in Touch Scale CSS Memory Engine Speed 5~25M - Slower JS Variable Pinch Rotation Offline Engine 10
- 11. Map Touch Events to Mouse Events Touch Mouse Start Down Touch Mouse Move Move Touch Mouse End Up 11
- 12. Tap Is Not Mouse Click Mouse Mouse Mouse Click Down Up Tap Touch Touch Start End Optimized Touch Tap Start 12
- 13. UIWebView Is Not Safari Rotation not Work Could not Disable Offline Cache Stricter HTML Parser 13
- 14. 1.5M In-memory Cache Is Useless 255K (15K Never in iPhone) Persisted 14
- 15. Offline Cache Optimization UI for downloading & updateready AJAX for Pre-load and Post-load Big CSS Sprite Dynamically Load JS & CSS Inline Base64 Image Binary in HTML, CSS & JS 15
- 16. Optimize JS Performance Avoid Long JS Execution Use Asynchronous AJAX Use window.setTimeout 16
- 17. Video and Audio Streaming Automatically switch among different bitrates 17
- 18. Native App Work with UIWebView Access Local Resources, e.g. Microphone Detect & Notify Connection Lost Move Heavy Computing to Native C/C++ Behave Like Native App Release Web App is Cheaper 18
- 19. Page Communicate with Native App Periodically Custom Rather Eval JS Address in than from App Page 19
- 20. Summary • High Performance Infrastructure o Cloud • High Compatibility UI Pattern o MVC • YSlow & Mobile Web Best Practices o Mini* Requests o More Cache o Less Cookie o Optimized HTML & CSS • What’s Special on iPad? o New Events o New Dimensions o Cache Limitation o Slower CPU o Instable Network 20
- 21. Everything Is Trade-off Even for Most Ideal Cases -- Steven Souders 21
- 22. Further Reading • High Performance Web Sites: Essential Knowledge for Front-End Engineers • Even Faster Web Sites: Performance Best Practices for Web Developers 22
- 23. 23
- 24. Thanks & Happy New Year 2011 24