Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply



Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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