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.
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 time the browser will render the DOM that has been received (if there is CSS, also on the rendering). But, at this point, the TCP connection has not been disconnected,
< body> has not yet been closed. The server can 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), at the same time to get the data from the database, and then push the
< script> tag and put the data in it. After the browser receives it, it can replace the corresponding data.
The difference from the server rendering
Server rendering and
Big Pipe have a lot of similar places, it is also the server to get data, fill it into the web DOM, return to the customer. But the biggest difference is that the
Big Pipe can return a page to the user before getting the data to reduce the waiting time to prevent the operation resistance of the data. Plug too long, and keep a blank page to the user.
The code used in the example of this article
The full project can be seen: https://github.com/joesonw/bigpipe-example