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 trouble with Ajax is to increase the number of requests, and need to write additional JS code, and JS calls to the request interface.
In this case, there is also a processing method, that is, the response block encoding for transmission. Response block encoding, you can transfer a part of the HTML code that does not need to be processed to the client, and other time-consuming code after the completion of the transfer of additional HTML code.
Block code (chunked encoding)
Chunked encoding is http1.1 to support the encoding format (of course, no browser currently does not support 1.1), chunked encoding differs from the general response as follows:
Copy Code code as follows:
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"
Copy Code code as follows:
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 head (header) and content (part), assuming that the content part needs to read the database, spend 3 seconds, and then display CSDN logo. The header section displays the Cnblogs logo. The code is as follows:
Copy Code code 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 (3000);
%>
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 start downloading the display of 2 logo, resource loading waterfall diagram is as follows:
Now change the code to the following, plus flush, so that response the HTML chunk out before:
<div id= "Head" style= "border:1px solid #ccc;" >
Copy Code code as follows:
Cnblogs logo
</div>
<%
Out.flush (); Flush response, block output
%>
<br/>
<div id= "Content" style= "border:1px solid blue;" >
<%
Sleep 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, is not found Cnblogs logo first downloaded display, 3 seconds after the CSDN logo will be displayed, the resource loading diagram is as follows:
From this figure found that the Cnblogs logo in the JSP page has not been executed to start downloading, which 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 the response header contains transfer-encoding:chunked, and if it does, it's a chunk. But to monitor the details of the chunk, as far as I know, only HttpWatch support is currently available to see how many pieces we have, but the number seems to show more than 1, as shown below:
