High-performance WEB development flush enables page partitioning, gradually presents flush for page partitioning, and gradually presents _ javascript skills

When processing time-consuming requests, we always hope that users can first see part of the content to let users know that the system is processing, rather than making no response. 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 js Code and request interfaces 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:

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

The 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)
Chunk #2

Chunk #3
....

Instance (JSP)
A simple page consists of a header and a content part. Assume that the content part needs to be read from the database. It takes 3 seconds to display the csdn logo. The header section displays the cnblogs logo. The Code is as follows:

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:

The Code is as follows:

Cnblogs logo

<%
Out. flush (); // flush response, multipart output
%>

<%
// Sleep for 3 seconds
Thread. currentThread (). sleep (3000 );
%>
Csdn logo

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: