1
Summary•    High Performance Infrastructure•    High Compatibility UI Pattern•    YSlow & Mobile Web Best Practices•    Wh...
Traffic                       Load Balancer    Web Server      Web Server      Web Server       Web Server                ...
MVC in JS at Client Browser Controller – Script#         View - jTemplate           Model – Restful Service               ...
YSlow & Mobile Web Best Practices•    http://developer.yahoo.com/performance/rules.html•    http://www.w3.org/TR/mwabp/   ...
Mini* Requests  40-60% of visitors come in with an empty cache.             •  CSS Sprites             •  Merge CSS & JS  ...
Cache80-90% of response time is for downloading resources. Version and never expire static resources Set cache-control hea...
Cookie  Every request (even static resource) carries the  active cookie data at the same domain.            Eliminate unne...
Optimize HTML & CSS     W3C          Scripts at   Validation      Bottom                   Avoid   External               ...
What’s Special on iPad?                 New         Cache                   Instable New Events                           ...
Map Touch Events to Mouse Events         Touch     Mouse         Start     Down         Touch     Mouse         Move      ...
Tap Is Not Mouse Click     Mouse      Mouse    Mouse     Click      Down      Up      Tap                Touch    Touch   ...
UIWebView Is Not Safari Rotation not Work Could not Disable Offline Cache Stricter HTML Parser                            ...
1.5M In-memory Cache Is Useless    255K (15K      Never    in iPhone)    Persisted                                  14
Offline Cache Optimization   UI for downloading & updateready   AJAX for Pre-load and Post-load   Big CSS Sprite   Dynamic...
Optimize JS Performance   Avoid Long JS Execution   Use Asynchronous AJAX   Use window.setTimeout                         ...
Video and Audio Streaming   Automatically switch among   different bitrates                                               ...
Native App Work with UIWebView  Access Local Resources, e.g. Microphone  Detect & Notify Connection Lost  Move Heavy Compu...
Page Communicate with Native App   Periodically             Custom                  Rather     Eval JS               Addre...
Summary•    High Performance Infrastructure     o  Cloud•    High Compatibility UI Pattern     o  MVC•    YSlow & Mobile W...
Everything Is Trade-offEven for Most Ideal Cases-- Steven Souders                            21
Further Reading•    High Performance Web Sites: Essential Knowledge for     Front-End Engineers•    Even Faster Web Sites:...
23
Thanks      &Happy New Year     2011                 24
Upcoming SlideShare
Loading in...5
×

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

1,378

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,378
On Slideshare
0
From Embeds
0
Number of Embeds
0
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×