Skip to main content

What Make Facebook page load faster ?

Image
By
Facebook has a “Lazy Loading” system they call “BigPipe” that helps the pages load fast. Facebook breaks each page down into sections they call “Pagelets”, and using Javascript only load the most important Pagelets first then load the less important ones shortly afterward.
And pipeline them through several execution stages inside web servers and browsers, as the modern microprocessor do to serve the various request in an order to increase the productivity.
Big Pipe is totally implemented in PHP and javascript.
By loading and rendering the main page structure first with minimal info on it, the page appears to load quicker than having to wait for a complete page to download and then render.

To exploit the parallelism between web server and browser, BigPipe first breaks web pages into multiple chunks called pagelets. Just as a pipelining microprocessor divides an instruction’s life cycle into multiple stages (such as “instruction fetch”, “instruction decode”, “execution”, “register write back” etc.), BigPipe breaks the page generation process into several stages:
  1. Request parsing: web server parses and sanity checks the HTTP request. 
  1. Data fetching: web server fetches data from storage tier.
  1. Markup generation: web server generates HTML markup for the response. 
  1. Network transport: the response is transferred from web server to browser.
  1. CSS downloading: browser downloads CSS required by the page.
  1. DOM tree construction and CSS styling: browser constructs DOM tree of the document and then applies CSS rules on it. 
  1. JavaScript downloading: browser downloads JavaScript resources referenced by the page.
  1. The JavaScript execution: browser executes JavaScript code of the page.




The first three stage are executed by the web server and last four step by the browser. But BigPipe enables several pagelets simultaneously.

As Facebook Homepage, when you put url-www.facebook.com in the browser. Then what's happen is homepage start to render pagelets by pagelets. Like-"“composer pagelet", "navigation pagelet", "news feed pagelet", "request box pagelet" and then the news feed is also divided into pagelets and after scrolling it get executed.

After flushing, the first response to the client, web server continues to generate pagelets one by one. As soon as a pagelet is generated, its response is flushed to the client immediately in a JSON-encoded object that includes all the CSS, JavaScript resources needed for the pagelet, and its HTML content, as well as some meta data. For example:


<script type="text/javascript">
big_pipe.onPageletArrive({id: “pagelet_composer”, content=<HTML>, css=[..], js=[..], …})
</script>

 Source- Facebook BigPipe

Labels:

Comments

  1. Keleman2 May 2017 at 11:16

    I often use Facebook, sometimes it's very slow,You gave me some practical method, useful, thanks for sharing.

    ReplyDelete
    Replies
    1. Anonymous2 June 2017 at 14:42

      Thanks for reading !!

      Please visit again.

      Delete

Post a Comment

Popular posts from this blog

PHP code for Implementing LRU cache.

By
<?php interface LRUCache{ /** •@param string $key •@param string $value •@return bool $result • •Stores value against the key in the cache */ public function insertIntoCache($key,$value); /** •@param string $key •@return string $value •Gets the value of a key from the cache */ public function getFromCache($key); /** Purge the entire cache */ public function purgeCache(); /** •@return int $count •Gets the number of successful cache hits so far */ public function allCacheHits(); /** •@return int $count •Gets the number of unsuccessful cache hits so far **/ public function allCacheMissed(); } class Cache implements LRUCache{ // int the max number of elements the cache supports private $capacity; // Array representing a naive hashmap (TODO needs to pass t
Post a Comment
Read more

PHP code for finding distinct elements common to all rows of a matrix in O(n) time complexity

By
<?php class Matrix{ /** •@param 2D array $matrix • •Prints distinct elements common to all rows of the matrix */ public static function getDistinctElementsCommonToAllRows($matrix){ // A hash map to store count of elements $hashmap = array(); $selectedHash = array(); $rows = count($matrix); $cols = count($matrix[0]); for ($i = 0; $i < $rows; $i++) { // Increment the count of first // element of the row if(array_key_exists($matrix[$i][0],$hashmap)){ $hashmap[$matrix[$i][0]] = $i+1; } // Starting from the second element // of the current row for ($j = 1; $j < $cols; $j++) { // If current ele
Post a Comment
Read more

Code for Mail in PHP

By
PHP mail function and mail configuration in  XAMPP  and sending mail is done from sendmail through localhost. I hope it will help you. mail() function <? php $to = 'dubeynitish22@hotmail.com' ; $subject = 'Test' ; $message = 'Hello' ; $headers = 'From: webmaster@example.com' . "\r\n" . 'Reply-To: webmaster@example.com' . "\r\n" . 'X-Mailer: PHP/' . phpversion ();   if (! mail ( $to , $subject , $message , $headers )){ echo "Error !!" ; } else { echo "Email Sent !!" ; } ?> 2. php.ini configuration (For SEND-MAIL) [ mail function ] ; For Win32 only . ; http : //php.net/smtp ; SMTP = localhost ; http : //php.net/smtp-port ; smtp_port = 25   ; For Win32 only . ; http : //php.net/sendmail-from ; sendmail_from = me@example . com   ; For Unix only . You may supply arguments as well ( default : "sendmail -t -i&q
14 comments
Read more