• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,248
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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-offEven 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