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 function for checking IMEI

By
Luhn algorithm for IMEI Check public function __checkIMEI($imei){ if(strlen($imei)==15){ $imeia=($imei[1]*2); if(strlen($imeia)==2){$imeia=str_split($imeia,1); $imeia=$imeia[0]+$imeia[1]; } $imeib=($imei[3]*2); if(strlen($imeib)==2){$imeib=str_split($imeib,1); $imeib=$imeib[0]+$imeib[1]; } $imeic=($imei[5]*2); if(strlen($imeic)==2){$imeic=str_split($imeic,1); $imeic=$imeic[0]+$imeic[1]; } $imeid=($imei[7]*2); if(strlen($imeid)==2){$imeid=str_split($imeid,1); $imeid=$imeid[0]+$imeid[1];} $imeie=($imei[9]*2); if(strlen($imeie)==2){$imeie=str_split($imeie,1); $imeie=$imeie[0]+$imeie[1]; } $imeif=($imei[11]*2); if(strlen($imeif)==2){$imeif=str_split($imeif,1); $imeif=$imeif[0]+$imeif[1]; } $imeig=($imei[13]*2); if(strlen($imeig)==2){$imeig=str_split($imeig,1); $imeig=$imeig[0]+$imeig[1]; } $IMEI= ($ime...
2 comments
Read more

Magic Function in PHP (__sleep() and __wakeup() )

By
There are many magic methods in PHP like  __construct(), __destruct(), __callback(), __get(), __set(), __sleep(), __wake() and many more. But we will be takingon  on  __sleep() and  __wake(). __sleep() : serialize() checks if your class has a function with the magic name __sleep(). If so, that function is executed prior to any serialization. It can clean up the object and is supposed to return an array with the names of all variables of that object that should be serialized. If the method doesn't return anything then NULL is serialized and E_NOTICE is issued. serialize() is used for the representation of the storage class for storing the value. Serializing   an object means converting it to a byte stream representation that can be stored in a file. The use of __sleep()  to commit the pending task. If a bulk data is being inserted then at that time __sleep can be used. it will not release the object unless the work is not completed....
Post a Comment
Read more

What are the effects of indexing on database tables?

By
The working of Index in database tables is the same as index work in a Text Book . It will help to browse the desired content faster in a book. we use to see the index on the first page then we check the page where it is in the book and then we directly come to that page, instead of going through all pages. Now databases , same happen with tables, if you are applying select query on the table, it will also check for the index and then return you the required field. It will return the field faster on which index is applied. Or in language, we can say that the index one query will execute faster instead of the non-indexed one. Join will execute faster on indexed one. eg- Consider a Table Product with `id` as Primary Key  id name price category_id  location_id                Table Info- Now  Applying Index on category_id  SELECT category_id FROM product WHERE category_id='5'; SELECT ca...
Post a Comment
Read more