Your SlideShare is downloading. ×
  • Like
David Wei And Changhao Jiang Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

David Wei And Changhao Jiang Presentation

  • 2,249 views
Published

 

Published in Spiritual , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,249
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
39
Comments
0
Likes
6

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
  • Deep integration: Each facebook home page is customized for a particular user, with features developed by many teams– some of them are applications by 3rd party developers, some of them are internal facebook feature – depending on the users’ adoption on the features and applications.Viral Adoption: we don’t know what will be the most popular Facebook feature tomorrowAgile development: our codebase change by hours, released weekly
  • Deep Integration: each page has many features;Viral adoption: usage pattern changes quicklyAgile development: feature changes fast
  • Current Assumptions: bandwidth = 1Mbps and latency = 40ms
  • First thing first: site speed matters.
  • The # of JS files are increased by 60%, the byte sites are increased by 30%. The # of pkg sent is halved, the byte size is 10% less.find | grep -v .svn | grep -v intern | grep .css$ -cfind | grep -v .svn | grep -v intern | grep .css$ | xargs cat > /tmp/dwei_2008
  • Developers think that timeeditor.js is a library file – in fact, it is only used in a single production page (career)On the other hand, it turns out that “resume“ function is almost always used in career page, too.
  • CSS is a similar story
  • The same trace-base analysis techniques can be use in image spriting too:
  • The answer is…In retrospection, this is pretty straight forward.
  • [devrs007] images > find | grep -vsvn -c3407

Transcript

  • 1.
  • 2. Adaptive Static Resource Optimization
    AJAXian Conference 2009
    Sep 15, 2009 Boston, MA
    David Wei and ChanghaoJiang
  • 3. Agenda
  • 4. Optimization has to be adaptive!
  • 5. Facebook: a site powered by AJAX
    Challenges day-to-day
    • Deep Integration
    • 6. Viral Adoption
    • 7. Agile Development
  • Why we need adaptive packaging?
    Day 1: Some smart engineers start a project!
    <Print css tag for feature A>
    <Print css tag for feature B>
    <Print css tag for feature C>
    <print HTML of feature A>
    <print HTML of feature B>
    <print HTML of feature C>

    “Let’s write a new page with features A, B and C!”
  • 8. Why we need adaptive packaging?
    Day 2: Some smart engineers run YSlow and thinks…
    <Print css tag for feature A>
    <Print css tag for feature B>
    <Print css tag for feature C>
    <print HTML of feature A>
    <print HTML of feature B>
    <print HTML of feature C>

    “A & B & C are always used; let’s package them together!”
  • 9. Why we need adaptive packaging?
    Day 2: Awesome!
    <Print css tag for feature A&B&C>
    <print HTML of feature A>
    <print HTML of feature B>
    <print HTML of feature C>

  • 10. Why we need adaptive packaging?
    Day 3: feature C evolves…
    <Print css tag for feature A & B & C>
    <print HTML of feature A>
    <print HTML of feature B>
    If (users_signup_for_C()) { <print HTML of feature C>}

  • 11. Why we need adaptive packaging?
    Day 3:
    <Print css tag for feature A & B & C>
    <print HTML of feature A>
    <print HTML of feature B>
    If (users_signup_for_C()) { <print HTML of feature C>}

    A&B are always used, while C is not. ..
  • 12. Why we need adaptive packaging?
    Day 4: feature C is deprecated
    <Print css tag for feature A & B & C>
    <print HTML of feature A>
    <print HTML of feature B>
    // no one uses C { <print HTML of feature C>}

  • 13. Why we need adaptive packaging?
    Day 4: we start to send unused bits
    <Print css tag for feature A & B & C>
    <print HTML of feature A>
    <print HTML of feature B>
    // no one uses C { <print HTML of feature C>}

    It is hard to remember we should remove C here.
  • 14. Why we need adaptive packaging?
    One months later…
    <Print css tag for feature A & B & C & D & E & F & G…>
    if (F is used) <print HTML of feature F>
    <print HTML of feature G>
    if (F is not used) { <print HTML of feature E>}

    Thousands of dead CSS rules in the package.
  • 15. Static Resource Management @ Facebook
    Challenges:
    • Deep Integration
    • 16. Viral Adoption
    • 17. Agile Development
    Responses:
    • Separate requirement declaration and delivery of static resources
    • 18. Requirement declaration: lives with HTML generation
    • 19. Delivery: Globally optimized based on trace analysis
  • Adaptive Packager: Internals
  • 20. Static Resource Management
    Separate Declaration from actual Delivery
    Back to Day 1:
    require_static(A_css); <render HTML of feature A>
    require_static(B_css); <render HTML of feature B>
    require_static(C_css);<render HTML of feature C>
    <deliver all required CSS>
    <print all rendered HTML>
    Requirement Declaration lives with HTML
    Global Optimization on Delivery
  • 21. Offline analysis
    Packager: Global JS/CSS Optimization
    Online process
    require_static(A_css); <render HTML of feature A>
    require_static(B_css); <render HTML of feature B>
    require_static(C_css); <render HTML of feature C>
    <deliver all required CSS>
    <print all rendered HTML>
    Usage Pattern logs
    Packaging algorithm
    “Optimal” packages
  • 22. Packager: models
    Cost/Benefit tradeoff model:
    To package two CSS/JS files A & B:
    Cost: for page requests that only uses A, we waste the bytes of B (bandwidth)
    Benefit: for page requests that uses both A and B: we save one round trip (latency )
    Maximize “Profit” (Benefit – Cost)
    Future: Users with different network connections have different packaging solutions
    Usage Pattern logs
    Packaging algorithm
    “Optimal” packages
  • 23. Packager: models
    Potential extensions (and trade-offs):
    Consider all resources used in user browsing sessions, instead of user page loads
    first page slower, subsequent pages faster
    Consider cache probability: new files change more
    New user slower, old users faster
    Consider other costs:
    CSS rules
    JS executions
    HTTP header overheads
    Usage Pattern logs
    Packaging algorithm
    “Optimal” packages
  • 24. Packager: algorithm
    A classic optimization problem:
    Algorithms:
    Greedy algorithm
    Simulated Annealing
    Clustering algorithms
    Trade-off between offline computation cost and accuracy:
    Greedy is good enough for us
    Usage Pattern logs
    Packaging algorithm
    “Optimal” packages
  • 25. Adaptive Performance Optimization: more
    Trace-based analysis for:
    • JS / CSS package optimization, image spriting
    • 26. Progressive rendering for common JS/CSS/Images
    • 27. Prioritization of resource delivery
  • Adaptive Packager: Operations
  • 28. Packager: Deployment
    Fully deployed since Nov 2008
    • Weekly based on previous week’s usage pattern (>100K unique usage patterns)
    • 29. Javascript and CSS packaging only (image soon)
    • 30. Efficiency monitors: size of wasted JS/CSS bytes; JS/CSS pkg numbers
  • Packager: scalable with development
    Nov 2008 => May 2009
  • 31. Packager: scalable with development
    Nov 2008 => May 2009
    • 'js/careers/jobs.js’,
    • 32. 'js/lib/ui/timeeditor.js’,
    • 33. 'resume/js/resumepro.js’,
    • 34. 'resume/js/resumesection.js’
  • Packager: scalable with development
    Nov 2008 => May 2009
  • 35. Packager: Experimental Image Spriting
    The puzzle of image spriting:
    • Thousands of virtual gifts with static images, which to sprite?
  • Packager: Experimental Image Spriting
    The puzzle of image spriting:
    • The answer is…
  • Packager: Experimental Image Spriting
    Data set: ~3500 images in the code base at this time
    • comparing to <1500 js/css files
  • Lesson learnt
  • 36. Human errors are unavoidable
    Automatic analysis is preferable:
    require_static(A_css); //forgot to remove the require_static
    require_static(B_css); &lt;render HTML of feature B&gt;
    require_static(C_css); &lt;render HTML of feature C&gt;
    &lt;deliver all required CSS&gt;
    &lt;print all rendered HTML&gt;
  • 37. Regression detection can be trickier
    A measurement framework is necessary:
    “The page has 10KB more Javascripts!”
    • Regression introduced by Packager? Or by developers? Or by feature adoption with new usage patterns?
    • 38. Which feature introduces it?
  • Summary
    Performance optimization has to be adaptive
    Good interfaces help a lot
    This is an emerging area -- long way to go
  • 39. Thank you!