Home > Developer > Web Develop
When dealing with more 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, all using AJAX, first HTML output to the client, and then use AJAX to load more time-consuming resources. The trouble with Ajax is the increase in the number of requests, and the need to write additional JS code, and JS call the request interface.
In this case, there is also a way to do this is to let the response chunked encoding for transmission. Response block encoding, you can transfer a portion 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.
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 difference is 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"
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 (here 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 header (header) and content (partial), assumes that the content part needs to read the database, takes 3 seconds, and then displays the 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 (server is poor, please be gentle point)
Open this demo address found a very normal page, after 3 seconds to download the Display 2 logo, the resource load Waterfall chart as follows:
Now change the code to the following, plus flush, and let response put the previous HTML block out:
<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, the resource load diagram as follows:
From this figure found that the Cnblogs logo in the JSP page has not finished the download began, this is the effect of the block output.
Monitoring tools:
How to know if we have successfully used chunk Encoding, as long as the tool to see if the response header contains transfer-encoding:chunked, if included, it is chunked. But in order to monitor the details of the tiles, as far as I know, only httpwatch support, you can see how much we are divided, but the number seems to show more than 1, such as:
See: High-performance Web development series
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
