![Pagelet response 1
<script type=“text/javascript”>
big_pipe.onPageletArrive({
“id” : “pagelet_navigation”,
“css” : [ <list of css resources>],
“js” : [ <list of JavaScript resources>],
“content” : <html>
“onload”: [JavaScript init code]
…
});
</script>](https://image.slidesharecdn.com/changhaojiang-101210231954-phpapp02/75/Changhao-jiang-facebook-58-2048.jpg)
![Pagelet response 2
<script type=“text/javascript”>
big_pipe.onPageletArrive({
“id” : “pagelet_composer”,
“css” : [ <list of css resources>],
“js” : [ <list of JavaScript resources>],
“content” : <html>
“onload”: [JavaScript init code]
…
});
</script>](https://image.slidesharecdn.com/changhaojiang-101210231954-phpapp02/75/Changhao-jiang-facebook-59-2048.jpg)
![Pagelet response 1
<script type=“text/javascript”>
big_pipe.onPageletArrive({
“id” : “pagelet_navigation”,
“css” : [ <list of css resources>],
“js” : [ <list of JavaScript resources>],
“content” : <html>
“onload”: [JavaScript init code]
…
});
</script>](https://crownmelresort.com/image.slidesharecdn.com/changhaojiang-101210231954-phpapp02/75/Changhao-jiang-facebook-58-2048.jpg)
![Pagelet response 2
<script type=“text/javascript”>
big_pipe.onPageletArrive({
“id” : “pagelet_composer”,
“css” : [ <list of css resources>],
“js” : [ <list of JavaScript resources>],
“content” : <html>
“onload”: [JavaScript init code]
…
});
</script>](https://crownmelresort.com/image.slidesharecdn.com/changhaojiang-101210231954-phpapp02/75/Changhao-jiang-facebook-59-2048.jpg)
Uploaded byzipeng zhang
Changhao jiang facebook
The document summarizes three frontend optimizations used at Facebook - Quickling, PageCache, and BigPipe - to improve site performance and reduce server costs. Quickling uses AJAX to remove redundant page loads. PageCache caches visited pages in the browser to improve load times of revisited pages. BigPipe pipelines the generation and delivery of page components to reduce loading times. Together these techniques improved user experience and saved Facebook an estimated 20% in infrastructure costs.
![[cssdevconf] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv16-131021133151-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Client-side Web Performance Optimization [paper]](https://cdn.slidesharecdn.com/ss_thumbnails/2011-01-18jakob-schroeterclient-side-optimization-110125033543-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Changhao jiang facebook
- 1. (c) 2010 Facebook,Inc. or its licensors. "Facebook" is a registered trademark of Facebook, Inc.. All rights reserved. 1.0
- 2. Ajaxifying, Caching andPipelining Facebook Website Changhao Jiang The Velocity Conference Dec 7th, 2010, Beijing, China
- 3. The beginning -2004
- 4.
- 5. Mission Give people thepower to share and make the world more open and connected
- 6. 500M Users 500 M
- 7.
- 8. Average hours permonth per user!
- 9. Site speed iscritical to Facebook!
- 10. What do wemeasure? Facebook CDN
- 11. What do wemeasure? server time client/render time Facebook network time CDN
- 12.
- 13.
- 14.
- 15. Three frontend optimizationsat Facebook Quickling transparently ajaxifies the whole web site PageCache caches user-visited pages in browser BigPipe pipelines Facebook website
- 16. Quickling: Ajaxify theFacebook site
- 17.
- 18.
- 19. Remove redundant workvia 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 Use session load unload
- 20. 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
- 21. Implementation details • LinkController • HistoryManager • Bootloader • Busy Indicator • CSS Unloading • Permanent link support • Resetting timer functions
- 22. User perceived latency(TTI) reduction 3000 2500 2000 1500 Full pageload Quickling 1000 500 0 /home.php /profile.php /photo.php /album.php 10% ~ 30% reduction in TTI
- 23. Server page generationtime reduction 2000 1800 1600 1400 1200 1000 Full pageload 800 Quickling 600 400 200 0 /home.php /profile.php /photo.php /album.php Quickling requests are 20% ~ 30%
- 24. 45% of pagehits are Quickling requests Quickling Full pageload
- 25. Quickling conclusion: • Reduceuser perceived latency by more than 10% • Save 10% of Facebook’s data center cost!
- 26. PageCache: Cache visitedpages at client side
- 27. Motivation – temporallocality • Some pages are likely to be revisited soon ▪ E.g. home page (re)visited every 3 page hits: -> profile -> photo -> -> notes -> -> photo -> photo • Cache them!
- 28. How PageCache works? 1. User clicks a link or back button 2. Quickling sends ajax to server 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
- 29. Challenges • Real timeupdates ▪ Page content needs to be as fresh as possible • Cache consistency ▪ Cached page should be consistent after state-modifying operations
- 30. Issue(1): Incremental updates Cached version Restored version
- 31. Issue(1): Incremental updates Pollserver for incremental updates via AJAX 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.
- 32. Issue(2): In-page writes Cached version Restored version
- 33. Issue(2): In-page writes Recordand 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 to JavaScript closure.
- 34. Issue(3): Cross-page writes Cached version State-changing op Restored version
- 35. Issue(3): Cross-page writes Serverside 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.
- 36. User perceived latency(TTI) redunction 2500 2000 1500 Full pageload Quickling 1000 PageCache 500 10x faster in user perceived latency 0
- 37. Server cost redunction 20% ~20% savings on page hits to home page
- 38. PageCache conclusion: • 10Xspeedup in user perceived speed! • Save 2% of Facebook’s data center cost!
- 39. BigPipe: pipeline Facebookwebsite
- 40.
- 41. User perceived latency Pagegeneration Network Latency Page rendering (in browser) (in server)
- 42.
- 43. User perceived latency Pagelet 1: Page generation Network Latency Page rendering (in browser) (in server) Pagelet 2: Pagelet 3:
- 56. TTI improvement Traditional model BigPipe 2500 2000 Millisecond 1500 1000 500 0 Firefox 3.6 IE 8 Safari 4.0 Chrome 4.1 2X improvement in user perceived latency for almost all browsers.
- 57. BigPipe first response <html> <head> <script src=“<big pipe js>” />…</ head> <body> … <div id=“left_column”> <div id=“pagelet_navigation”></div> </div> <div id=“middle_column”> <div id=“pagelet_composer></div> </div> …
- 58. Pagelet response 1 <script type=“text/javascript”> big_pipe.onPageletArrive({ “id” : “pagelet_navigation”, “css” : [ <list of css resources>], “js” : [ <list of JavaScript resources>], “content” : <html> “onload”: [JavaScript init code] … }); </script>
- 59. Pagelet response 2 <script type=“text/javascript”> big_pipe.onPageletArrive({ “id” : “pagelet_composer”, “css” : [ <list of css resources>], “js” : [ <list of JavaScript resources>], “content” : <html> “onload”: [JavaScript init code] … }); </script>
- 60. Pagelet example class AdsPagelet extends PageletResponse { public function init () { // initialize pagelet } public function prepare() { // data fetching } public render() { // generate pagelet response. } }
- 61. Pagelet programming model • Self contained ▪ HTML, JavaScript, CSS, onloadRegister • Advanced features: ▪ Pagelet hierarchy ▪ Phased rendering ▪ Cross-pagelet dependencies ▪ data dependency ▪ display dependency ▪ JavaScript dependency
- 62. BigPipe programming model // Step 1: create BigPipe instance $big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE); // Step 2: Specify page layout and pagelet place holders. $big_pipe->setPage( ‘<div id=“left_column”> <div id=“pagelet_navigation”></div> </div> <div id=“middle_column”> <div id=“paglet_composer”></div> <div id=“pagelet_stream”></div> </div>’); // Step 3: add pagelets to the pipe $big_pipe->addPagelet( new UIPagelet() ->setSrc(‘/pagelet/composer.php’) ->setWrapperId(‘pagelet_composer’)); … // Step 4: generate pagelets flush them out. echo $big_pipe->render();
- 63. BigPipe programming model // Step 1: create BigPipe instance $big_pipe = BigPipe::getInstance (BigPipeType::PIPELINE); // Step 2: Specify page layout and pagelet place holders. $big_pipe->setPage( ‘<div id=“left_column”> // Step 1: create BigPipe instance <div id=“pagelet_navigation”></div> </div> <div id=“middle_column”> <div id=“paglet_composer”></div> $big_pipe = BigPipe::getInstance <div id=“pagelet_stream”></div> </div>’); (BigPipeType::PIPELINE);the pipe // Step 3: add pagelets to $big_pipe->addPagelet( new UIPagelet() ->setSrc(‘/pagelet/composer.php’) ->setWrapperId(‘pagelet_composer’)); … // Step 4: generate pagelets flush them out. echo $big_pipe->render();
- 64. BigPipe programming model // Step 1: create BigPipe instance $big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE); // Step 2: Specify page layout and pagelet place holders. // Step 2: Specify page layout and pagelet place holders. $big_pipe->setPage( ‘<div id=“left_column”> $big_pipe->setPage( <div id=“pagelet_navigation”></div> </div> ‘<div id=“left_column”> <div id=“middle_column”> <div id=“paglet_composer”></div> <div id=“pagelet_navigation”></div> <div id=“pagelet_stream”></div> </div>’); </div>// Step 3: add pagelets to the pipe <div id=“middle_column”> $big_pipe->addPagelet( new UIPagelet() <div id=“paglet_composer”></div> ->setSrc(‘/pagelet/composer.php’) ->setWrapperId(‘pagelet_composer’)); <div id=“pagelet_stream”></div> … </div>’); 4: generate pagelets flush them out. // Step echo $big_pipe->render();
- 65. BigPipe programming model // Step 1: create BigPipe instance $big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE); // Step 2: Specify page layout and pagelet place holders. // Step 3: add pagelets to the pipe $big_pipe->setPage( ‘<div id=“left_column”> <div id=“pagelet_navigation”></div> $big_pipe->addPagelet( </div> <div id=“middle_column”> new UIPagelet() <div id=“paglet_composer”></div> <div id=“pagelet_stream”></div> ->setSrc(‘/pagelet/composer.php’) </div>’); ->setWrapperId(‘pagelet_composer’)); // Step 3: add pagelets to the pipe … $big_pipe->addPagelet( new UIPagelet() ->setSrc(‘/pagelet/composer.php’) ->setWrapperId(‘pagelet_composer’)); … // Step 4: generate pagelets flush them out. echo $big_pipe->render();
- 66. BigPipe programming model // Step 1: create BigPipe instance $big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE); // Step 2: Specify page layout and pagelet place holders. $big_pipe->setPage( ‘<div id=“left_column”> <div id=“pagelet_navigation”></div> // Step 4: generate pagelets flush them out. </div> <div id=“middle_column”> <div id=“paglet_composer”></div> <div id=“pagelet_stream”></div> echo $big_pipe->render(); </div>’); // Step 3: add pagelets to the pipe $big_pipe->addPagelet( new UIPagelet() ->setSrc(‘/pagelet/composer.php’) ->setWrapperId(‘pagelet_composer’)); … // Step 4: generate pagelets flush them out. echo $big_pipe->render();
- 67. BigPipe generation modes • Single flush mode ▪ Support search-engine crawlers ▪ Support clients without JavaScript • Pipeline mode ▪ Generate and flush pagelets sequentially (default mode) • Parallel mode ▪ Generate pagelets in parallel and flush them out-of-order
- 68. BigPipe programming model • Encapsulation ▪ Hide implementation details • Intuitive ▪ Easy to understand mental model for developers • Flexible ▪ Different modes good for different use case.
- 69. BigPipe advanced features • AjaxPipe ▪ Use iframe to pipeline Ajax response ▪ Used by Facebook home page’s dashboards (photo, groups, etc) • WidgetPipe ▪ Pipeline multiple widgets (“like” button) on third party websites
- 70.