The front-end rendering accelerates – Big Pipe

The front-end rendering accelerates - Big Pipe

Preface

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.

CDN

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

Big Pipe

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.

Big Pipe

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> .

Big Pipe

< body>

< body>

< 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.

< script>

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.

Big Pipe

Big Pipe

The code used in the example of this article

The full project can be seen: https://github.com/joesonw/bigpipe-example

Https://github.com/joesonw/bigpipe-example

'use strict';

Leave a Reply

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