(c) 2010 Facebook, Inc. or its licensors. Facebook is...
Transcript of (c) 2010 Facebook, Inc. or its licensors. Facebook is...
![Page 1: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/1.jpg)
(c) 2010 Facebook, Inc. or its licensors. "Facebook" is a registered trademark of Facebook, Inc.. All rights reserved. 1.0
![Page 2: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/2.jpg)
Ajaxifying, Caching and Pipelining Facebook Website
The Velocity Conference Dec 7th, 2010, Beijing, China
Changhao Jiang
![Page 3: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/3.jpg)
The beginning - 2004
![Page 4: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/4.jpg)
Today
![Page 5: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/5.jpg)
Mission Give people the power to share and make the world more open and connected
![Page 6: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/6.jpg)
500M Users 500M
![Page 7: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/7.jpg)
Today’s reality
![Page 8: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/8.jpg)
Average hours per month per user!
![Page 9: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/9.jpg)
Site speed is critical to Facebook!
![Page 10: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/10.jpg)
What do we measure?
CDN
![Page 11: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/11.jpg)
What do we measure?
CDN
Facebook client/render time
server time
network time
![Page 12: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/12.jpg)
Time-to-Interact (TTI)
![Page 13: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/13.jpg)
Time-to-Interact (TTI)
![Page 14: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/14.jpg)
Time-to-Interact (TTI)
![Page 15: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/15.jpg)
Three frontend optimizations at Facebook
Quickling transparently ajaxifies the whole web site
PageCache caches user-visited pages in browser
BigPipe pipelines Facebook website
![Page 16: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/16.jpg)
Quickling: Ajaxify the Facebook site
![Page 17: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/17.jpg)
Motivation: remove redundant work
![Page 18: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/18.jpg)
Motivation: remove redundant work
![Page 19: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/19.jpg)
load unload load unload load unload load unload
load unload
Full page load
Ajax call
Remove redundant work via Ajax
Page 1 Page 2 Page 3 Page 4
Page 1 Page 2 Page 3 Page 4
Use session
Use session
![Page 20: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/20.jpg)
How Quickling works? 1. User clicks a link or back/forward button
2. Quickling sends an ajax to server
4. Quickling blanks the content area
3. Response arrives
5. Download javascript/CSS
6. Show new content
![Page 21: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/21.jpg)
Implementation details • Link Controller
• HistoryManager
• Bootloader
• Busy Indicator
• CSS Unloading
• Permanent link support
• Resetting timer functions
![Page 22: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/22.jpg)
User perceived latency (TTI) reduction
10% ~ 30% reduction in TTI
0
500
1000
1500
2000
2500
3000
/home.php /profile.php /photo.php /album.php
Full pageload Quickling
![Page 23: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/23.jpg)
0 200 400 600 800
1000 1200 1400 1600 1800 2000
/home.php /profile.php /photo.php /album.php
Full pageload Quickling
Server page generation time reduction
Quickling requests are 20% ~ 30% cheaper
![Page 24: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/24.jpg)
45% of page hits are Quickling requests
Quickling
Full pageload
![Page 25: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/25.jpg)
Quickling conclusion:
• Reduce user perceived latency by more than 10%
• Save 10% of Facebook’s data center cost!
![Page 26: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/26.jpg)
PageCache: Cache visited pages at client side
![Page 27: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/27.jpg)
Motivation – temporal locality
• 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!
![Page 28: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/28.jpg)
How PageCache works? 1. User clicks a link or back button
2. Quickling sends ajax to server
4. Quickling blanks the content area
3. Response arrives
5. Download javascript/CSS
6. Show new content
2. Find Page in the cache
3.5 Save response in cache
![Page 29: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/29.jpg)
Challenges
• Real time updates ▪ Page content needs to be as fresh as possible
• Cache consistency ▪ Cached page should be consistent after state-modifying operations
![Page 30: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/30.jpg)
Issue(1): Incremental updates
Cached version Restored version
![Page 31: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/31.jpg)
Issue(1): Incremental updates Poll server 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.
![Page 32: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/32.jpg)
Issue(2): In-page writes
Cached version Restored version
![Page 33: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/33.jpg)
Issue(2): 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 to JavaScript closure.
![Page 34: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/34.jpg)
Issue(3): Cross-page writes
Cached version Restored version State-changing op
![Page 35: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/35.jpg)
Issue(3): 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.
![Page 36: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/36.jpg)
0
500
1000
1500
2000
2500
Full pageload Quickling PageCache
User perceived latency (TTI) redunction
10x faster in user perceived latency
![Page 37: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/37.jpg)
20%
~20% savings on page hits to home page
Server cost redunction
![Page 38: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/38.jpg)
PageCache conclusion:
• 10X speedup in user perceived speed!
• Save 2% of Facebook’s data center cost!
![Page 39: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/39.jpg)
BigPipe: pipeline Facebook website
![Page 40: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/40.jpg)
Facebook page
![Page 41: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/41.jpg)
User perceived latency
Page generation (in server) Page rendering (in browser) Network Latency
![Page 42: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/42.jpg)
Pagelets
![Page 43: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/43.jpg)
Page generation (in server) Page rendering (in browser) Network Latency
User perceived latency
Pagelet 1:
Pagelet 2:
Pagelet 3:
![Page 44: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/44.jpg)
![Page 45: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/45.jpg)
![Page 46: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/46.jpg)
![Page 47: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/47.jpg)
![Page 48: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/48.jpg)
![Page 49: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/49.jpg)
![Page 50: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/50.jpg)
![Page 51: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/51.jpg)
![Page 52: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/52.jpg)
![Page 53: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/53.jpg)
![Page 54: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/54.jpg)
![Page 55: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/55.jpg)
![Page 56: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/56.jpg)
TTI improvement
2X improvement in user perceived latency for almost all browsers.
0
500
1000
1500
2000
2500
Firefox 3.6 IE 8 Safari 4.0 Chrome 4.1
Mill
isec
ond
Traditional model BigPipe
![Page 57: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/57.jpg)
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> …
![Page 58: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/58.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>
![Page 59: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/59.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>
![Page 60: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/60.jpg)
Pagelet example
class AdsPagelet extends PageletResponse { public function init () { // initialize pagelet } public function prepare() { // data fetching } public render() { // generate pagelet response. } }
![Page 61: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/61.jpg)
Pagelet programming model • Self contained ▪ HTML, JavaScript, CSS, onloadRegister
• Advanced features: ▪ Pagelet hierarchy
▪ Phased rendering
▪ Cross-pagelet dependencies
▪ data dependency
▪ display dependency
▪ JavaScript dependency
![Page 62: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/62.jpg)
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();
![Page 63: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/63.jpg)
// 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();
// Step 1: create BigPipe instance $big_pipe = BigPipe::getInstance(BigPipeType::PIPELINE);
BigPipe programming model
![Page 64: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/64.jpg)
// 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();
// 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>’);
BigPipe programming model
![Page 65: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/65.jpg)
// 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();
// Step 3: add pagelets to the pipe $big_pipe->addPagelet( new UIPagelet()
->setSrc(‘/pagelet/composer.php’) ->setWrapperId(‘pagelet_composer’));
…
BigPipe programming model
![Page 66: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/66.jpg)
// 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();
// Step 4: generate pagelets flush them out. echo $big_pipe->render();
BigPipe programming model
![Page 67: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/67.jpg)
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
![Page 68: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/68.jpg)
BigPipe programming model
• Encapsulation ▪ Hide implementation details
• Intuitive ▪ Easy to understand mental model for developers
• Flexible ▪ Different modes good for different use case.
![Page 69: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/69.jpg)
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
![Page 70: (c) 2010 Facebook, Inc. or its licensors. Facebook is …velocity.oreilly.com.cn/2010/ppts/ChanghaoJiang.pdfUser perceived latency (TTI) reduction 10% ~ 30% reduction in TTI 0 500](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0d164b7e708231d4389d8f/html5/thumbnails/70.jpg)
Thank you!