针对iPad平台的高性能网站架构

1,639 views
1,551 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,639
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

针对iPad平台的高性能网站架构

  1. 1. 1
  2. 2. Summary•  High Performance Infrastructure•  High Compatibility UI Pattern•  YSlow & Mobile Web Best Practices•  What’s Special on iPad? 2
  3. 3. Traffic Load Balancer Web Server Web Server Web Server Web Server Server Farm (VM)Distributed Cache Application Server Server Farm Farm 3
  4. 4. MVC in JS at Client Browser Controller – Script# View - jTemplate Model – Restful Service ASP.NET MVC 2 4
  5. 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. 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. 7. Cache80-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. 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. 9. Optimize HTML & CSS W3C Scripts at Validation Bottom Avoid External Empty CSS & JS Image src 9
  10. 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. 11. Map Touch Events to Mouse Events Touch Mouse Start Down Touch Mouse Move Move Touch Mouse End Up 11
  12. 12. Tap Is Not Mouse Click Mouse Mouse Mouse Click Down Up Tap Touch Touch Start End Optimized Touch Tap Start 12
  13. 13. UIWebView Is Not Safari Rotation not Work Could not Disable Offline Cache Stricter HTML Parser 13
  14. 14. 1.5M In-memory Cache Is Useless 255K (15K Never in iPhone) Persisted 14
  15. 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. 16. Optimize JS Performance Avoid Long JS Execution Use Asynchronous AJAX Use window.setTimeout 16
  17. 17. Video and Audio Streaming Automatically switch among different bitrates 17
  18. 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. 19. Page Communicate with Native App Periodically Custom Rather Eval JS Address in than from App Page 19
  20. 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. 21. Everything Is Trade-offEven for Most Ideal Cases-- Steven Souders 21
  22. 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. 23
  24. 24. Thanks &Happy New Year 2011 24

×