Facebook hacks for performance optimization

03 Oct

Facebook hacks for performance optimization

in Cloud, Facebook, javascript, Performance

Facebook engineers posted a great video on the topic and the accompanying slidedeck is here.

I captured some of the challenges and solutions facebook engineers discuss:

 

Problem: 

To enhance the functionality of the site, Facebook created ways to add JavaScript very easily to the site or pages. Very soon every engineer was additing JS and soon there was at least 1 mb of JavaScript that was being loaded. They took several steps to reduce the size of JS and load pages faster.

 

1. Haste framework:

Haste Framework was introduced in Facebook to help package the javascript and supports lazy load javascript. Not all pages need all the javascript and pages can load specific javascript.

 

2. Bootloader:

This was another framework or a library for lazy loading javascript. This works with Haste. Bootloader works by using @suggest tag, which tells the system that I might need a resource so keep it ready but do not load it.

e.g. if you want to visit pictures page, the tagging library is not loaded. Its only ready. When someone clicks on tag, the tag library is loaded.

 

3. Age old fix: load css first and javascript later. But this was not enough, because there are places where javascript is referred during the page load. So the engineers at Facebook looked at usage patterns and discovered that there are only a 3 steps in most user interactions:

  1. user clicks on a link
  2. async request is sent and
  3. something in dom is updated.

 

Therefore instead of writing custom code for each link on the page, a generic javascript code called primer (which is a JS library) links to a php page and passes the link clicked on via 'rel' attribute in the 'href'.

 

4. Move the work done by javascript to php. e.g. 'Older Post' link. There is a new ajaxify attribute in the href. If the javascript exists, it executes, otherwise the call is delegated to the php linked via ajaxify attribute.

 

5. Using Forms: Due to overuse of javascript the form was not being used much anymore. Thousands of lines of javascript code was removed by using more forms and going back to basics of HTML. Things like 'text area' for leaving the comment were not forms but javascript. Putting it under forms reduced complexity and code. 

 

In essence, using primer javascript, the number of js loaded was reduced to one.

 

Performance measurement tools: 45 minutes into the video they talk about performance measurement tools. 

 

Another piece of marvel introduced by Facebook engineers is technology calle Bigpiper

 

Bigpipe: Progressively loading pages. Renders the head progressively and not only the head, but other parts of the page as well. pagelet: little pieces of the page. Therefore different parts of the page is rendered in parallel.

Bigpipe works with Haste. 

Bigpipe works by exploiting the parallelism between web server and browser, BigPipe first breaks web pages into multiple chunks called pagelets. BigPipe breaks the page generation process into several stages:

 

  1. Request parsing: web server parses and sanity checks the HTTP request. 
  2. Data fetching: web server fetches data from storage tier.
  3. Markup generation: web server generates HTML markup for the response. 
  4. Network transport: the response is transferred from web server to browser.
  5. CSS downloading: browser downloads CSS required by the page.
  6. DOM tree construction and CSS styling: browser constructs DOM tree of the document, and then applies CSS rules on it. 
  7. JavaScript downloading: browser downloads JavaScript resources referenced by the page.
  8. JavaScript execution: browser executes JavaScript code of the page.

Enjoy reading and hacking.

copyright 2012 10jumps Llc.

copyright 2012 10jumps LLC.