[Translation] BigPipe: high-performance “pipelining” page

original address: http://www.facebook.com/note.php?note_id=389414033919
President Address: http://isd.tencent.com/?p=2419 < br /> Author: Jiang Changhao
Facebook site speed as one of the most critical business tasks. In 2009, we successfully achieved the Facebook Web site, doubling the speed
. Our team of engineers and it is a few key innovations make it possible. In this article, I l show you one of our secret weapon, which we call BigPipe great underlying technology.
BigPipe is a redesign of the basic dynamic web service system. General idea is to break down pages into small pieces called Pagelets, then through the Web server and browser set up and manage their pipeline at different stages of the run. This is similar to most modern microprocessors during the execution of the pipeline: command pipeline through different multi-processor execution units to achieve the best performance. Although BigPipe is the basis of the existing service network re-design process, but it does not require changes to existing web browsers or servers, it is entirely in PHP and JavaScript.
motivation
To better understand the BigPipe, we need to look at the existing dynamic Web services system, its history can be traced back to the early stages of the World Wide Web, but Compared with the early and now has not changed much. Modern websites are far higher than 10 years ago with the dynamic effects and interactions, but has long been a traditional web service system can not keep up with today internet speed. In the traditional model, the user request life cycle is as follows:

1. Browser sends an HTTP request to the Web server.
2. Web server parses the request, then reads the data storage layer, the development of an HTML file, and use it to send an HTTP response to the client.
3. HTTP response sent to the browser via the Internet.
4. The browser parses the Web server response, the use of HTML files to build a DOM tree, and download the referenced CSS and JavaScript files.
5. CSS resources to download, the browser resolve them and apply them to the DOM tree.
6. JavaScript resources to download, the browser parse and execute them.
traditional model of efficiency in the modern site is very low, because a lot of system operation sequence, can not overlap. Some, such as delay loading JavaScript, parallel downloads, network optimization techniques have been widely used in the community, in order to overcome some limitations. However, these optimizations are rarely involved in the Web server and browser bottleneck caused by the execution order. When the Web server is busy generating a page, the browser is idle, wasting their idle cycles. When the Web server, complete the build page and sent to the browser, the browser has become the performance bottleneck and the Web server to its no help. Time overlapping generation Web server and browser rendering time, we can not only reduce the final time delay, but also can show the user visible region earlier pages to the user, thus greatly reducing the user perceived latency.
Web server and browser have time to render the time overlap is particularly useful, such as content-rich sites like Facebook. A typical Facebook page contains information on many different data sources: friends list, friends dynamic advertising. Web presence in the traditional mode of these queries users will have to wait to go back and generate the final data file, and then send it to the user computer. Query delay any final document will slow down the entire generation.
BigPipe how it works
to make use of the Web server and browser parallelism between, BigPipe first broken down into multiple pages can be called Pagelets. As the assembly line microprocessor into a life-cycle instructions (such as “fetch”, “instruction decode”, “enforcement” and “write-back register”, etc.) more than one stage, BigPipe page generation process is divided into the following phases :

1. request resolution: Web server analysis and integrity checking of the HTTP request.
2. Data acquisition: Web server to get data from the storage layer.
3. tokenizer: Web server generates the response HTML tags.
4. network: response from the Web server to the browser.
5. CSS Download: Download web browser CSS requirements.
6. DOM tree and CSS: The browser DOM document structure tree, and then apply its CSS rules.
7. JavaScript in Download: Download web browser in JavaScript reference resources.
8. JavaScript implementation: the web browser to execute JavaScript code.
the first three phases, from a Web server, the last four stages are executed by the browser. Each Pagelet must order all of these stages, but BigPipe in different phases of several Pagelets simultaneously.

(Facebook home page Pagelets, each rectangle corresponds to a Pagelet.)
Facebook page using the above picture as an example to illustrate how the pages are broken down into Pagelets. The home page includes several Pagelets: “Author Pagelet”, “navigation Pagelet”, “news Pagelet”, “request box Pagelet”, “advertising pagelet”, “friend” and “Contact” and they are independent of each other. When the “Navigation Pagelet” displayed to the user, “News Pagelet” still being generated on the server.
in BigPipe, the life cycle of a user request is this: in the browser sends an HTTP request to the Web server. HTTP request is received, and some in the above comprehensive examination, the web server immediately sends back an HTML file is not closed, including a HTML
tags and labels began to label. Label includes BigPipe JavaScript library to parse Pagelet replies received. The label, there is a template that specifies the logical structure of the page and Pagelets placeholder. For example:

rendered after the first reaction to the client, Web server to generate one by one as long as a Pagelet Pagelets generation, he will be immediately flushed to the client in a JSON-encoded object, including all CSS, JavaScript, the pagelet, its HTML content, as well as some metadata required resources. For example:

the client receives Pagelet by” onPageletArrive “directives issued, BigPipe JavaScript library will be the first to download it the CSS resources; CSS resources are in the download is complete, BigPipe HTML tags will be displayed in Pagelet its innerHTML. The CSS can be multiple Pagelets download at the same time, they can download their CSS display to confirm the completion of the order. In BigPipe, JavaScript is lower than the priority of CSS resources and page content. Therefore, BigPipe will not be displayed until all Pagelets download any Pagelet in JavaScript. Then, all Pagelets the JavaScript asynchronous download. Finally Pagelet the JavaScript initialization code downloaded according to its own situation to determine the execution order. This highly parallel systems
The end result is that many Pageletsr the different stages of implementation at the same time. For example, the browser can be downloaded are three Pagelets
CSS resources, while another Pagelet content has been shown, at the same time, the server also generates a new Pagelet. From the user point of view, the page is presented step by step. The beginning of the display of web content will be faster, which reduces the delay of the user perception of the page. If you want your eyes to see the difference, you can try the following links:
traditional model and BigPipe. The first link is the traditional mode of single-mode display page. The second link is BigPipe pipeline mode page. If your browser version older, very slow speed, poor browser cache, which increases between what two different cut-off time will be more apparent.
performance test results
The figure is the traditional model and BigPipe performance data comparison chart, the data is 75% of the users of a page, the most important content (such as: News on Facebook is considered the most important elements on the home page) perceived delay. Data collection method is to load the Facebook page 50 times and disabling the browser cache. The figure shows BigPipe most browsers allow users to feel the delay was reduced by half.

(Facebook home page delay contrast)
It is worth mentioning that BigPipe lines from the microprocessor to be inspired. However, their are some differences between the pipeline process. For example, although most of the stage BigPipe can only operate once Pagelet, but sometimes multiple Pagelets CSS and JavaScript download, but can operate simultaneously, similar to superscalar microprocessor. BigPipe Another important difference is that we achieved from the introduction of parallel programming “obstacle” concept, all Pagelets to complete a particular phase, such as multiple Pagelet display area, they can download and execute further JavaScript.
on Facebook, we encourage creative thinking. We are constantly trying to innovate technologies to make our site faster.
author Jiangchang Hao is currently a research scientist at Facebook, he was working on a variety of innovations to make the site faster.
(translator also found several articles on BigPipe, if you are interested you can find under: Facebook innovation BigPipe: optimizing page load time, name of station technical analysis
– facebook page plus strange set technology, Facebook allows to double the speed of BigPipe site technical analysis, Facebooks
BigPipe Done in Java, Open
BigPipe javascript implementation, Tutorial:
Implementing Facebook BigPipe Using ASP.Net MVC, BigPipe
Done in Node.js)