The front-end rendering accelerates – Big Pipe


The first screen rendering speed is always a pain point on the front end

From the most open, the direct static resource server returns the resource file directly to the CDN distribution file, then to the server rendering technology. No one is not to get the best experience for the user.

Big Pipe is an accelerated first screen loading technology adopted by Facebook, which can be clearly felt on the front page of Facebook.

brief introduction

It looks as if it’s the same as Ajax

First of all, we need to know that Ajax is just another common HTTP request. The process of a complete HTTP request is

DNS Resolving -> TCP handshake -> HTTP Request -> Server -> Server;

The entire network link has spent quite a lot of time.

Big Pipe only needs to use one connection without additional requests.

The technology behind Big Pipe is not really complex, and the server is passed on to a browser without a closed < body> at this point, the browser will render the DOM that has been received (if there is a CSS, also render). But, at this point, the TCP connection has not been disconnected, < body> the server is not closed yet, the server can follow. Continue to push more DOM to browsers, or even < script>

In this way, the browser can take a page without data (the corresponding data display module to display the load in the load), take the data from the database at the same time, and then push the < script> the tag, and put the data in it. After the browser is received, it can replace the corresponding data.

The difference from the server rendering

Server rendering has a lot of similar places with Big Pipe. It also gets data from the server, fills it into the web DOM and returns to the customer. But the biggest difference is that Big Pipe can return a page to the user before getting the data to reduce the waiting time so as to prevent the data operation from blocking too long, and keeping it all the time. A blank page is given to the user.

The code used in the example of this article

The whole project can be seen as follows:

‘use strict’;

Const koa = require (‘koa’);

Const Readable = require (‘stream’).Readable;

Const co = require (‘co’)

Const app = koa ();

Const sleep = MS => new Promise (R => setTimeout (R, MS));

App.use (function* () {()

Const view = new Readable ();

View._read = () => {};

This.body = view;

This.type =’html’;

This.status = 200;

View.push (`

< html>

< head>

< title> BigPipe Test< /title>

< style>

#loader {

Width: 100px;

Height: 100px;

Border: 1px solid #ccc;

Text-align: center;

Vertical-align: middle;


< /style>

< /head>

< body>

< div id=" loader" >

< div id=" content" > Loading< /div>

< /div>


CO (function* () {()

Yield sleep (2000);

View.push (`

< script>

Document.getElementById (‘content’).InnerHTML =’Hello World’;

< /script>


View.push (‘< /body> < /html> “);

View.push (null);

}).Catch (E => {});


App.listen (5000);

Leave a Reply

Your email address will not be published. Required fields are marked *