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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

David Wei And Changhao Jiang Presentation

2,288

Published on

Published in: Spiritual, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,288
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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!

    ×