Improving Facebook&apos;s Performance with AJAX and Browser Caching<br />The AJAX Experience 2009<br />Sep 14-16, 2009 Bos...
Site speed is critical to Facebook<br /><ul><li>Facebook site:
More than 250 million users around the world
Billions of requests every day
Site speed has a huge impact
Affects user engagement, user growth and business metrics
One of the highest priority tasks at Facebook.</li></li></ul><li>Front end performance<br /><ul><li>Most important perform...
From the time user clicks on a link to he/she is able to interact with the page.
Front end latency accounts for more than 70% of total TTI latency:
Front end latency: > 70%
Include network latency and browser render time (CSS, JavaScript, images)
Back end latency: < 30%
Include page generation time (PHP, DB, Memcache, etc)</li></li></ul><li>Front end engineering at Facebook<br /><ul><li>Per...
Static resource (JavaScript, CSS, images) optimizations:
Packaging, spriting, Dynamic JavaScript loading, and CSS reuse
Software abstractions
Enables algorithmic / system level optimization of page rendering process </li></li></ul><li>Two software abstractions at ...
Quickling: transparentlyajaxifiesthe whole web site
PageCache: caches user-visited pages in browser</li></li></ul><li>Quickling: Ajaxify the Facebook site<br />
Motivation<br /><ul><li>Goal: make the site faster by removing redundant work across pages
Approach: use AJAX to render pages
Requirement: transparent to users and developers
Simulate browser behavior
Allow developers to focus on product features (fast moving)</li></li></ul><li>Redundant work<br /><ul><li>JavaScript / CSS...
Product features common to all pages:
e.g. Top navigation bar, Facebook Chat.</li></li></ul><li>Remove redundant work via Ajax<br />Full page load<br />Page 1<b...
How Quickling works?<br />1. User clicks a link or back/forward button<br />2. Quickling sends an ajax to server<br />3. R...
Architecture components<br /><ul><li>Link Controller
HistoryManager
Bootloader
Busy Indicator</li></li></ul><li>LinkController<br />Intercept user clicks on links<br /><ul><li>After DOM content is read...
HistoryManager<br />Enable ‘Back/Forward’ buttons for AJAX requests<br /><ul><li>Set target page URL as the fragment of th...
http://www.facebook.com/home.php
http://www.facebook.com/home.php#/cjiang?ref=profile
http://www.facebook.com/home.php#/friends/?ref=tn
Detect back/forward button-click:
W3C browsers: periodically poll the “location.hash” to see if value changes
IE: inject an invisible iframe, whose ‘src’ attribute will be updated by browser.  </li></li></ul><li>Bootloader<br />Load...
Dynamically download CSS/Javascript for the next page
Upcoming SlideShare
Loading in...5
×

Chanhao Jiang And David Wei Presentation Quickling Pagecache

6,555

Published on

Published in: Technology, Business
1 Comment
31 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,555
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
132
Comments
1
Likes
31
Embeds 0
No embeds

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
  • Chanhao Jiang And David Wei Presentation Quickling Pagecache

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×