Facebook is a big time killer. You can harvest farm without owning an inch of land, kill your buddies and still brag about it, save unknown species of zoo animals and poke any girl you know and she wont mind.
But Facebook is a case study for web developers like me. A typical Facebook page, depending on network and host, loads within 5 seconds. Facebook team has set this time to 2.5 seconds. Anything beyond 2.5 seconds is a big no no. For me it loads 19 CSS files, just one JS file, all in all a 50KB page w/out images. If you didnt pay attention to last line, it FB loads just one JS file and if you look at the byte size its just 10K file. Like I mentioned earlier Gzipped content is much lighter i.e. low byte size, it can be sent over network quickly. Facebook and every other website follows and compress the content they send over the network. But this is not all.
Before I move ahead, lets understand how a page is “rendered” in browser.
- You send a request to FB servers.
- FB server looks at your request and prepares a page, if you were logged in, it will send your profile page otherwise a nice login page. This job is done by PHP, MySQL, Apache and some in house tools developed by FB.
- FB sends you back the page, the HTML
- The browser reads or “parses” the HTML and finds out well it also needs CSS, images and JS and sends separate requests for these assets.
Now here is the tricky part. Browsers need all the possible assets that can affect the rendering of page and JS is one thing that can hide images, change CSS applied on an element, add text or can change the complete layout. So when browsers encounter a JS file they stop loading anything and concentrate only on JS. Till the time JS is not loaded and processed nothing else is done. This have been, more or less, same for nearly all the browsers till date. Web developers try to deceive browsers in many ways. The one way suggested by Yahoo! is to load JS at the bottom of page or develop the page in such a way that JS is loaded just before body tag is closed. This is not feasible in many cases. Say for example, on my webpage a menu appears in top header not in bottom of the page so it is rendered first and I need it to be active. There are way outs.
- RequireJS
- labJS
- Load JS using AJAX
- Create Script tag dynamically
- Load scripts in iFrame
- and others
Facebook employs some thing it calls a BigPipe. Interestingly FB divides its page into smaller chunks, named pagelets and every pagelet has its own JS associated with it. Have a look at following BigPipe fragment
<script> big_pipe.onPageletArrive({
"id": "pagelet_nav_lite",
"phase": 1,
"is_last": false,
"append": false,
"display_dependency": [
"pagelet_navigation"
],
"bootloadable": {
"editable-side-nav-js": [
"CiNUi",
"WTiBX",
"Nahdv",
"vstFf"
]
},
"css": [
"p0tHf",
"HOV0r",
"FLbGk",
"mWAGo",
"e2Nmn"
],
"js": [
"CiNUi",
"WTiBX",
"k29le",
"kJEXe",
"5CZKw",
"S4cYi",
"3iRY2"
],
"resource_map": {
"e2Nmn": {
"name": "css\/sprite\/autogen\/a2gtd9_duri.css",
"type": "css",
"nonblocking": 1,
"src": "http:\/\/static.ak.fbcdn.net\/rsrc.php\/z8ZLB\/hash\/40d4o2t0.css"
},
"vstFf": {
"name": "js\/ui\/xhp\/page\/editable_side_nav.js",
"type": "js",
"src": "http:\/\/static.ak.fbcdn.net\/rsrc.php\/z5QP6\/p\/hash\/eoj7km8p.js"
}
},
"requires": [
],
"provides": [
],
"onload": [
],
"onafterload": [
],
"onpagecache": [
],
"onafterpagecache": [
],
"refresh_pagelets": [
],
"invalidate_cache": [
],
"content": {
"pagelet_nav_lite": "HTML removed, view source your own FB profile page 
"
},
"page_cache": true
})</script>
Further spying on the DOM using Firebug, I could see an iframe named “bootloader_iframe” which loads JS files.
BigPipe has really changed the way Facebook loads and works. Facebook is showing generosity and is sharing what it does. Unlike Yahoo! and Google, Facebook is not so much developer friendly and is not well known to share its knowledge. I hoping to see more documentation on BigPipe. Here is some info: http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
The JSON object was formatted using JSONLint.
