High-performance Web development (one)-Flush makes the page chunked and progressively renders

Source: Internet
Author: User

High-performance Web development (one)-Flush makes the page chunked and progressively renders

When dealing with time-consuming requests, we always want to let the user see some of the content first, let the user know that the system is being processed, not unresponsive. In general, we are dealing with this situation, using AJAX, first output HTML to the client, and then use AJAX to load more time-consuming resources. The problem with Ajax is the number of requests added, and the need to write additional JS code, and the request interface of the JS call.

In this case, another way to deal with this is to have the response chunked encoded for transmission. Response block encoding, the ability to transfer some of the unnecessary processing of HTML code to the client, and other time-consuming code to run after the completion of the transfer of additional HTML code.

Chunked encoding (chunked encoding)

Chunked encoding is http1.1 support encoding format (of course, no browser does not support 1.1), chunked encoding with the general response differences such as the following:

Normal response:

http/1.1 OK

Cache-control:private, max-age=60

content-length:75785

content-type:text/html; Charset=utf-8

.. Other response headers

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

Chunked Encoding Response:

http/1.1 OK

Cache-control:private, max-age=60

content-length:75785

content-type:text/html; Charset=utf-8

transfer-encoding:chunked

.. Other response headers

Chunk #1 (This is usually a 16-digit number that marks the size of this block)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" ....

Chunk #2

<div .....

Chunk #3

....</body>

Instance (JSP)

A simple page, divided into the header (header) and content (section), if the content part of the need to read the database, spend 3 seconds time, and then display CSDN logo. The header section shows the Cnblogs logo. The code is as follows:

<body><div id= "Head" style= "border:1px solid #ccc;" >   cnblogs logo  </div><br/><   div id= "Content" style= "border:1px solid blue;" ><%//Sleep 3 seconds thread.currentthread (). Sleep (n);%>csdn logo<br/>   </div></body>

Demo Address: http://213.186.44.204:8080/ChunkTest/nochunk.jsp (poor server, please be gentle)

Open this demo address found a very normal page, after 3 seconds to download the display 2 logo, resources loaded into the waterfall diagram such as the following:

Now change the code to the following, plus flush, and let response output the previous HTML tiles:

<div id= "Head" style= "border:1px solid #ccc;" >

   Cnblogs logo    </div><%out.flush ();//Flush Response, chunked output%><br/><div id= "content" style= "border:1px solid blue;" ><%//Sleep 3 seconds thread.currentthread (). Sleep (n);%>csdn logo<br/>   </div>

Demo Address: http://213.186.44.204:8080/ChunkTest/chunk.jsp

Open this demo address, is not found Cnblogs logo first downloaded display, 3 seconds after the CSDN logo display, resource loading diagram such as the following:

From this figure, Cnblogs logo in the JSP page has not finished running and started to download, this is the effect of the block output.

Monitoring tools:

How to know if we have successfully used chunk Encoding, just use the tool to see if transfer-encoding:chunked is included in the response header, and if so, it is chunked. But to monitor the specifics of the chunking, as far as I know, there is only httpwatch support at the moment to see how many pieces we've divided, but the number seems to show 1 more, for example:

You need to see: High-performance Web development series

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.