High-performance web development flush enables page partitioning, gradually presents flush for page partitioning, and gradually presents

Generally, Ajax is used to output HTML to the client, and then Ajax is used to load time-consuming resources. The trouble with Ajax is that it increases the number of requests and requires additional JavaScript code. Code And the request interface called by Js.
In this case, another method is to transmit the response block encoding. Response: multipart encoding. You can first transmit some HTML code that does not need to be processed to the client, and then transmit other HTML code after other time-consuming code is executed.
Chunked Encoding)
Chunked encoding is only supported by http1.1 (of course no browser currently supports 1.1). The differences between chunked encoding and general responses are as follows: Copy code The Code is as follows: normal response:
HTTP/1.1 200 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"

Copy codeThe Code is as follows: chunked encoding response:
HTTP/1.1 200 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 (here it is usually a hexadecimal number, indicating 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 header and content (Part). Assume that the content needs to read the database, which takes 3 seconds, then, the csdn logo is displayed. The header section displays the cnblogs logo. The Code is as follows: copy Code the code is as follows:

cnblogs logo

<%
// sleep for 3 seconds
thread. currentthread (). sleep (3000 );
%>
csdn logo

Demo address: http: // 213.186.44.204: 8080/chunktest/nochunk. jsp (poor server, please be gentle)
Open the demo address and find that the page is normal. The two logos will be downloaded and displayed three seconds later. The resource loading waterfall diagram is as follows:

Now, change the code to the following and add flush to make response output the previous HTML multipart:
<Div id = "head" style = "border: 1px solid # CCC;">Copy codeThe Code is as follows: cnblogs logo
</Div>
<%
Out. Flush (); // flush response, multipart output
%>
<Br/>
<Div id = "content" style = "border: 1px solid blue;">
<%
// Sleep for 3 seconds
Thread. currentthread (). Sleep (3000 );
%>
Csdn logo <br/>

</Div>

Demo address: http: // 213.186.44.204: 8080/chunktest/chunk. jsp
Open this demo address to see if the cnblogs logo is downloaded and displayed three seconds later. The resource loading diagram is as follows:

The figure shows that the cnblogs logo is downloaded before the JSP page is executed. This is the effect of multipart output.

Monitoring tools:

How do we know if Chunk encoding is used successfully? You only need to use a tool to check whether the response header contains transfer-encoding: chunked. If yes, Chunk encoding is used. However, to monitor the details of the chunks, as far as I know, only httpwatch currently supports it. You can check the number of chunks we have divided, but the number seems to display one more chunks, for example: