Detailed explanation of segmented transmission and rendering in web pages

I recently came across this knowledge, so I searched for some information and made some summaries

What is segmented transfer?

When an http header is introduced. This header indicates that the entity is transmitted using chunked encoding. Chunked encoding can divide the entity into chunks for transmission, and each piece of content in the chunked encoding will self-identify the length. This gives web developers a clue, if multiple data are needed, and multiple data are returned slowly. You can return one piece after processing it, so that the browser can receive the HTML as early as possible and render it first.

How to transmit in segments?

Now that we know that we can transmit web pages one by one, we can modify the web pages, get the data needed together, and render them together without waiting. Templates also need to be processed naturally. Split it so that the server can take the templates and render them together

Finally we will find that the total processing time remains unchanged, but using segmented output web pages, a piece of HTML can be rendered to the client as early as possible, so that the user can use the part that arrives first. On the other hand, early page feedback can also reduce users’ anxiety in waiting.

To sum up, using this optimization method can speed up the rendering speed of web pages.

Applicable scenarios for segmented transmission

1. When some back-end processing of the page is time-consuming, you can try to use segmented transmission. You can render a part and then send a part to the client. Although the total time remains the same, the browser is transmitting all of it. There will be no waiting state until it is finished. You can render as early as possible and give user feedback.

2. When the backend processes the rendered data, the upper part is faster and the lower part is slower (you can render the faster part above first)

bigpipe

Just put the slowest part at the bottom and pass it over. So there is a loading idea, which is to use js backfill. The backend can render the fast template first, and then render the slow template. We can empty all the blocks on the page and render them in parallel. Whoever is faster will render the backfill js first. In this way, parallel and first-come-first-served rendering can be achieved.

Applicable scenarios of bigpipe

1 The backend has slow data processing, blocking the page, and the slowest part is not at the end of the web page. (You can turn the slowest part into backfill)
2. When there are multiple pieces of data in the backend that need to be processed in parallel (you don’t know which piece comes back first, so render a shelf first. For parallel requests, the piece that comes back first is flushed and backfilled first)

The above is the detailed content of Detailed explanation of segmented transmission and rendering in web pages. For more information, please follow other related articles on the PHP Chinese website!