Your SlideShare is downloading. ×

Chanhao Jiang And David Wei Presentation Quickling Pagecache

6,353

Published on

Published in: Technology, Business
1 Comment
30 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,353
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
130
Comments
1
Likes
30
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
  • Provide functions to programmers to allow registering a javascript function to be called right before cached page is shown.Used by home page to refresh ‘ads’, fetch latest stories
  • Provide functions to programmers to allow registering a javascript function to be called right before cached page is shown.Used by home page to refresh ‘ads’, fetch latest stories
  • Transcript

    • 1.
    • 2. Improving Facebook's Performance with AJAX and Browser Caching
      The AJAX Experience 2009
      Sep 14-16, 2009 Boston, MA
      ChanghaoJiang and David Wei
    • 3. Site speed is critical to Facebook
      • Facebook site:
      • 4. More than 250 million users around the world
      • 5. Billions of requests every day
      • 6. Site speed has a huge impact
      • 7. Affects user engagement, user growth and business metrics
      • 8. One of the highest priority tasks at Facebook.
    • Front end performance
      • Most important performance metric: TTI (Time to interact) latency
      • 9. From the time user clicks on a link to he/she is able to interact with the page.
      • 10. Front end latency accounts for more than 70% of total TTI latency:
      • 11. Front end latency: > 70%
      • 12. Include network latency and browser render time (CSS, JavaScript, images)
      • 13. Back end latency: < 30%
      • 14. Include page generation time (PHP, DB, Memcache, etc)
    • Front end engineering at Facebook
      • Performance measuring/monitoring/debugging tools
      • 15. Static resource (JavaScript, CSS, images) optimizations:
      • 16. Packaging, spriting, Dynamic JavaScript loading, and CSS reuse
      • 17. Software abstractions
      • 18. Enables algorithmic / system level optimization of page rendering process
    • Two software abstractions at Facebook
      • Dramatically improve Facebook’s TTI latency:
      • 19. Quickling: transparentlyajaxifiesthe whole web site
      • 20. PageCache: caches user-visited pages in browser
    • Quickling: Ajaxify the Facebook site
    • 21. Motivation
      • Goal: make the site faster by removing redundant work across pages
      • 22. Approach: use AJAX to render pages
      • 23. Requirement: transparent to users and developers
      • 24. Simulate browser behavior
      • 25. Allow developers to focus on product features (fast moving)
    • Redundant work
      • JavaScript / CSS library shared across pages
      • 26. Product features common to all pages:
      • 27. e.g. Top navigation bar, Facebook Chat.
    • Remove redundant work via Ajax
      Full page load
      Page 1
      Page 2
      Page 3
      Page 4
      Use session
      load
      unload
      load
      unload
      load
      unload
      load
      unload
      Ajax call
      Page 1
      Page 2
      Page 3
      Page 4
      load
      Use session
      unload
    • 28. How Quickling works?
      1. User clicks a link or back/forward button
      2. Quickling sends an ajax to server
      3. Response arrives
      4. Quickling blanks the content area
      5. Download javascript/CSS
      6. Show new content
    • 29. Architecture components
    • LinkController
      Intercept user clicks on links
      • After DOM content is ready, dynamically attach a handler to all link clicks (could also use event delegation)
      $(‘a’).click(function() {
      // ‘payload’ is a JSON encoded response from the server
      $.get(this.href, function(payload) {
      // Dynamically load ‘js’, ‘css’ resources for this page.
      bootload(payload.bootload, function() {
      // Swap in the new page’s content
      $(‘#content’).html(payload.html)
      // Execute the onloadRegister’edjs code
      execute(payload.onload)
      });
      }
      });
    • 33. HistoryManager
      Enable ‘Back/Forward’ buttons for AJAX requests
      • Set target page URL as the fragment of the URL
      • 34. http://www.facebook.com/home.php
      • 35. http://www.facebook.com/home.php#/cjiang?ref=profile
      • 36. http://www.facebook.com/home.php#/friends/?ref=tn
      • 37. Detect back/forward button-click:
      • 38. W3C browsers: periodically poll the “location.hash” to see if value changes
      • 39. IE: inject an invisible iframe, whose ‘src’ attribute will be updated by browser.
    • Bootloader
      Load static resources via ‘script’, ‘link’ tag injection
      • Before entering a new page:
      • 40. Dynamically download CSS/Javascript for the next page
      • 41. Javascript:
      • 42. CSS
      varscript = document.createElement(&apos;script&apos;);
      script.src = source;
      script.type = &apos;text/javascript&apos;;
      document.getElementsByTagName(&apos;head&apos;)[0].appendChild(script);
      varlink = document.createElement(&apos;link&apos;);
      link.rel = &quot;stylesheet&quot;;
      link.type = &quot;text/css&quot;;
      link.media = &quot;all&quot; ;
      link.href = source;
      document.getElementsByTagName(&apos;head&apos;)[0].appendChild(link);
    • 43. Bootloader (cont.)
      Load static resources via ‘script’, ‘link’ tag injection
      • Reliable callbacks to ensure page content shown after depended resources arrive:
      • 44. JavaScript resources:
      • 45. ‘bootloader.done(resource_name)’ injected at the end of all JS packages.
      • 46. CSS resources
      • 47. ‘#bootloader_${resource_name} {height: 42px}’ injected in all CSS packages.
      • 48. Bootloader polls the corresponding invisible div height to determine if the CSS package arrives.
    • Busy Indicator
      • Set link cursor to hourglass immediately
      • 49. Setdocument.body’s cursor to hourglass
      • 50. Use iframe transport instead of XHR.
    • Simulate browser events
      • Simulate browser events for Quickling response
      • 51. DomContentReady
      • 52. onload
      • 53. onbeforeunload
      • 54. onunload
      • 55. Stub out setTimeout,setInterval:
      • 56. Make sure timer functions are uninstalled upon leaving a page
      • 57. Occasionally, developers explicitly clean up JS states before leaving a page
    • CSS issue
      • CSS rules accumulated over time
      • 58. Render time is roughly proportional to the # of CSS rules
      • 59. Automatically unload CSS rules before leaving a page
    • Memory consumption
      • Browser memory consumption increase overtime
      • 60. Periodically force full page load to allow browsers to reclaim memory
    • Permanent link
      • Problem: Allow users to save/send browser URL:
      • 61. For example:
      • 62. http://www.facebook.com/home.php#/profile.php
      • 63. Browser will request ‘/home.php’ instead of ‘/profile.php’,
      • 64. How to make browser displays ‘/profile.php’ instead of ‘/home.php’?
      • 65. Solution:
      • 66. Prelude JavaScript code in every page that checks for ‘location.hash’, redirect if it contains a target page URL.
    • Current status
      Turned on for FireFox and IE users: (&gt;90% users)
      ~60% of page hits to Facebook site are Quicklingrequests
    • 67. Render time improvement
      profile.php
      home.php
      40% ~ 50% reduction in render time
    • 68. PageCache: Cache visited pages at client side
    • 69. PageCache
      Motivation: temporal locality
      Data accessed now is likely to be accessed again soon.
      Cache the data at the client:
      Improve latency
      Reduce server load
    • 70. PageCache
      Cache user visited pages in browsers
      Some pages are likely to be revisited soon
      A typical user session:
      home -&gt; profile -&gt; photo -&gt; home -&gt; notes -&gt; home -&gt; photo -&gt; photo
      Home page visited every 3 ~ 5 page views
      Back/Forward button
    • 71. Possible solution 1
      Modify HTTP headers
      ‘Cache-Control’, ‘Expires’ headers
      Cache on disk, managed by browser
      Pros:
      Easy to implement
      Cons:
      Only good for static content that rarely changes
    • 72. Possible solution 2
      Cache DOMtree
      Simulate tab-switching
      Cache in memory, managed by application with JavaScript
      Pros:
      Flexible (full control over cache with JavaScript)
      Restore a page from cache is super fast.
      Cons:
      Difficult to be transparent to developers
      Hard to isolate cache pages, global variables clobbering across pages
    • 73. Possible solution 3 (adopted approach)
      Cache server response
      Cache server’s response
      Cached in memory, managed by application with JavaScript
      Pros:
      Flexible (full control over cache with JavaScript)
      Almost transparent to developers
      Cons:
      Have to keep track of changes made to cached response
      Reconstruct DOM and global JavaScript states when restoring a page
    • 74. How PageCache works?
      1. User clicks a link or back button
      2. Quickling sends ajax to server
      2. Find Page in the cache
      3. Response arrives
      3.5 Save response in cache
      4. Quickling blanks the content area
      5. Download javascript/CSS
      6. Show new content
    • 75. Incremental updates
      Cached version
      Restored version
    • 76. Incremental updates
      Poll server for incremental updates viaAJAX calls
      Provides an ‘onpagecacheRegister’ API to developers:
      Invoked when a page is restored from cache.
      Used to send AJAX to server for incremental updates, refresh ads, etc.
      Blank the content area before incremental updates arrive to avoid flash of stale contents.
    • 77. In-page writes
      Cached version
      Restored version
    • 78. In-page writes
      Record and replay
      Automatically record all state-changing operations in a cached page
      All AJAX calls using ‘POST’ method, or those explicitly specified ‘replayable’ will be added to cached content.
      Automatically replay those operations when cached page is restored.
      Cached AJAX handler callback functions already contain all the contextual information about the recorded operations due toJavaScript closure.
    • 79. Cross-page writes
      Cached version
      Restored version
      State-changing op
    • 80. Cross-page writes
      Server side invalidation
      Instrument server-side database API, whenever a write operation is detected, send a signal to the client to invalidate the cache.
      The signal (a.k.a. cache invalidation message) contain information about what persistent data has changed.
      Upon receiving cache messages, the client side can flush the whole cache or refresh only those affected page components via AJAX.
    • 81. Current status
      Deployed on production
      Cache in memory
      Turned on for home page
    • 82. 20%
      ~20% savings on page hits to home page
    • 83. Render time improvement
      3X ~ 4X speedup in render time vsQuickling
    • 84. Summary
      Quickling:
      Dramatically improves render time by eliminating redundant work.
      PageCache:
      improves user latency and reduces server load.

    ×