2. Improving Facebook's Performance with AJAX and Browser Caching The AJAX Experience 2009 Sep 14-16, 2009 Boston, MA ChanghaoJiang and David Wei

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

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%

15. Static resource (JavaScript, CSS, images) optimizations:

16. Packaging, spriting, Dynamic JavaScript loading, and CSS reuse

17. Software abstractions

19. Quickling: transparentlyajaxifiesthe whole web site

22. Approach: use AJAX to render pages

23. Requirement: transparent to users and developers

24. Simulate browser behavior

26. Product features common to all pages:

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

30. HistoryManager

31. Bootloader

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

40. Dynamically download CSS/Javascript for the next page

41. Javascript:

42. CSSvarscript = 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);

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.

49. Setdocument.body’s cursor to hourglass

51. DomContentReady

52. onload

53. onbeforeunload

54. onunload

55. Stub out setTimeout,setInterval:

56. Make sure timer functions are uninstalled upon leaving a page

58. Render time is roughly proportional to the # of CSS rules

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:

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.