• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



1 Embed 75

http://nbazaar.org 75



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

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