Facebook's quirky page-loading technology

It's okay. Use the agent on the next Facebook, register into the home page, habitual view of the source code, found a very interesting phenomenon, home content, but the source code in the HTML code is very little, but to many sections of the JavaScript code, These JS code is used to dynamically generate HTML, why does Facebook need to do this? Out of professional habits, research:

One, HTML code

First look at the home page to see the source code, because the source code is relatively large, so the picture compression, may not see clearly, only need to note that the red is HTML code, the rest of the Dark One is all JS code:

View larger image

Second, JS code

See the dense mass of JS code is not startled, the following intercept a section of JS to analyze (the rest of the JS are similar), Facebook source code is filled with similar to the following JS code:

<script> Big_pipe.onpageletarrive ({ "id": "Pagelet_welcome_box", "phase": 1, "Is_last": false, "append": false, "bootloadable": [], "CSS": ["Ldrwi", "Eon+n"], "JS": ["f+b8d", "IDQLC"], "Resource_map": [], "requires": [], "provides": [], "OnLoad": ["window.__uicontrollerregistry[" c4c13a3ed2dd1e0e349b72] = new Uipagelet ("c4c13a3ed2dd1e0e349b72", " /pagelet/generic.php/welcomeboxpagelet/", {}, {});; ;"], "Onafterload": [], "Onpagecache": [], "Onafterpagecache": [], "refresh_pagelets": [], "Invalidate_cache": [], "Content": { "Pagelet_welcome_box": "<div id=" c4c13a3ed2dd1e0e349b72 "><div class=" Uiimageblock clearfix FbxWelcomeBox " > ... This omits n multiple HTML. }, ' Page_cache ': true }); </script>

Let's take a look at what the Big_pipe.onpageletarrive function does. We only focus on the parameters of the id,js,css,content4 parameters, you can see that JS and CSS are encoded, the following is the decoding of our attention code:

<script> Big_pipe.onpageletarrive ({ "id": "Pagelet_welcome_box", "CSS": { Name: "Css/c5mv8gd5gwoc4kk0.pkg.css" Permanent:true SRC: "Http://static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.css" Type: "CSS" }, "JS": { Name: "Js/19khsprwvtvokwow.pkg.js" Permanent:false SRC: "Http://static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.js" Type: "JS" }, "Content": { "Pagelet_welcome_box": "<div id=" c4c13a3ed2dd1e0e349b72 "><div class=" Uiimageblock clearfix FbxWelcomeBox " > ... This omits n multiple HTML. } }); </script>

See the JS after the restore, you should guess what the onpageletarrive function is, in fact, onpageletarrive the most important implementation is to "content" in the HTML content inserted into the corresponding ID (above the "Pagelet_welcome_box "), and download the corresponding CSS and JS in the HTML element.

Third, chunk, flush

See above analysis, everyone must be strange, why do Facebook to generate so many segments JS, and then use JS to dynamically insert HTML code, this is not off the pants fart, superfluous? It's better to generate HTML code directly. Facebook, of course, is not so stupid, let's first monitor the Facebook HTTP request, the monitor chart is as follows:

View larger image

Notice the red part of the picture, where Facebook used chunk to block out the page. This is easier to understand, Facebook home page JS code segment is not 1 times on the total output, but a paragraph of output.

What is chunk and how to use chunk, please refer to my other 1 posts: Flush Let the page block, gradually rendered

Summarize

Facebook uses chunk technology to make the page block out into a lot of JS segments, the advantage of this is that the server and the client can be processed in parallel, without waiting for all the server processing, the client will be processed.

For example, blog Garden home page, blog home is divided into the following pieces ("Recommended blog ranking", "Home Essay list", "Latest News" ... ），

We typically handle this HTTP request as follows:

1. browser sends HTTP request

2. Server processing requests (read from the first 50 recommended blogs from the cache, read the "Home essay list" from the database, read "Latest news" from the database), and generate the HTML code for the first page.

3. The server sends the HTML code to the client

4, the browser received the response, processing HTML (download Css,js,image, execute JS, etc.)

It can be seen that in the traditional HTTP request 4 process, each process must wait for the first 1 processes to complete before execution, so there is a great waste of resources.

Facebook's handling of the HTTP request is as follows:

1. browser sends HTTP request

2. Server processing requests (from the cache to read the top 50 recommended blogs, generate "recommended blog" JS code snippet, flush output the code snippet,

The server continues to read the "Home essay list" and generates input JS code snippets.

The server continues to read "latest news" and generates input JS code snippets.

3. The browser received the JS code snippet, download the code snippet required for JS and CSS. Inserts HTML code.

In this process, the biggest feature is that the 2,3 is processed in parallel, the server processed a part of the data to the browser has been processed to render processing, and then continue to process other data.